layui文件上传+ThinkPHP

本文主要是介绍layui文件上传+ThinkPHP，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 1 1.前端html代码
 2 <div class="layui-form-item">
 3     <label class="layui-form-label">修改头像</label>
 4     <div class="layui-input-inline uploadHeadImage">
 5         <div class="layui-upload-drag" id="headImg">
 6             <i class="layui-icon"></i>
 7             <p>点击上传图片，或将图片拖拽到此处</p>
 8         </div>
 9     </div>
10     <div class="layui-input-inline">
11         <div class="layui-upload-list">
12             <img class="layui-upload-img headImage" src="" id="demo1">
13             <p id="demoText"></p>
14         </div>
15     </div>
16 </div>
17 
18 
19 2.前端js代码
20 <script>layui.use(['form', 'layer','upload',"element"],
21     function() {
22         $ = layui.jquery;
23         var form = layui.form,
24             upload = layui.upload,
25             layer = layui.layer;
26         //拖拽上传
27         var uploadInst = upload.render({
28             elem: '#headImg'
29             , url: '{:url("uploadImg")}'
30             , size: 500
31             , before: function (obj) {
32                 //预读本地文件示例，不支持ie8
33                 obj.preview(function (index, file, result) {
34                     $('#demo1').attr('src', result); //图片链接（base64）
35                 });
36             }
37             , done: function (res) {
38                 console.log(res);
39                 //如果上传失败
40                 if (res.code > 0) {
41                     return layer.msg('上传失败');
42                 }
43                 var demoText = $('#demoText');
44                 // demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
45                 $("#imagepath").val(res.image)
46                 layer.msg("上传成功")
47             }
48             , error: function () {
49                 //演示失败状态，并实现重传
50                 var demoText = $('#demoText');
51                 demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
52                 demoText.find('.demo-reload').on('click', function () {
53                     uploadInst.upload();
54                 });
55             }
56         });
57         element.init();
58 });

 1 3.后台php代码
 2     // 图片上传
 3     public function uploadImg(){
 4         // 上传代码
 5         $file = request()->file('file');
 6         // 上传到本地服务器
 7         $savename = \think\facade\Filesystem::disk('public')->putFile( 'goods', $file);
 8         $data['image'] = $savename;
 9         $data['code'] = 0;
10 
11         return json($data);
12     }

这篇关于layui文件上传+ThinkPHP的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！