TP5 + layui 檔案上傳操作(直接上程式碼)
阿新 • • 發佈:2018-11-22
1.HTML部分
<div class="layui-upload" style="margin-left:110px;"> <button type="button" class="layui-btn" id="test1">更新頭像</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1" src="{$data.icon??''}"> <p id="demoText"></p> </div> </div>
注: img的src的值是做的回選,根據需要選擇
2.js部分
<script src="/static/layuiadmin/layui/layui.js"></script> <script> layui.use(['upload','form','laydate'], function() { //upload 檔案上傳 var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate; var $ = layui.jquery ,upload = layui.upload; //檔案上傳 laydate.render({ elem: '#date1' }); //普通圖片上傳 var uploadInst = upload.render({ elem: '#test1' , url: '{:url("index/upload")}' , before: function (obj) { //預讀本地檔案示例,不支援ie8 obj.preview(function (index, file, result) { // alert(result); $('#demo1').attr('src', result); //圖片連結(base64) }); } , done: function (res) { //如果上傳失敗 if (res.code == 0) { return layer.msg('上傳失敗'); } //上傳成功 console.log(res); } , error: function () { //演示失敗狀態,並實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); //監聽提交 form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最終的提交資訊' }) return false; }); }); </script>
3.PHP部分
/** * 檔案上傳 */ public function upload(Request $request){ $file = request()->file('file'); // 移動到框架應用根目錄/public/uploads/ 目錄下 $info = $file->move(ROOT_PATH . 'public' . DS . 'upload'); $reubfo = array(); //定義一個返回的陣列 if($info){ $reubfo['code']= 1; $reubfo['savename'] = "/upload/".$info->getSaveName(); }else{ // 上傳失敗獲取錯誤資訊 $reubfo['code']= 0; $reubfo['err'] = $file->getError(); } return $reubfo; }
注:$reubfo['savename'] 可以將這部分存在資料庫
上傳成功就是這樣的,自己馬克一下.
ps:請注意layui的版本