这篇文章主要介绍了ThinkPHP5+Layui实现图片上传加预览功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下。

html代码

1. <div class="layui-upload"> 
2.  <button type="button" class="layui-btn" id="cover">上传封面</button> 
3. </div>  
4. <div class="layui-input-inline"> 
5.  <img id="preview" width="200px" height="200px"> 
6. </div> 

js代码

1. var uploadInst = upload.render({ 
2.   elem:'#cover' 
3.   ,url:'addCourse' 
4.   ,accept:'file' // 允许上传的文件类型 
5.   ,auto:true // 自动上传 
6.   ,before:function (obj) { 
7.    console.log(obj); 
8.    // 预览 
9.    obj.preview(function(index,file,result) { 
10.     // console.log(file.name); //图片名字 
11.     // console.log(file.type); //图片格式 
12.     // console.log(file.size); //图片大小 
13.     // console.log(result); //图片地址 
14.     $('#preview').attr('src',result); //图片链接 base64 
15.    }); 
16.    // layer.load(); 
17.   } 
18.   // 上传成功回调 
19.   ,done:function(res) { 
20.    // console.log(upload); 
21.    console.log(res); 
22.   } 
23.   // 上传失败回调 
24.   ,error:function(index,upload) { 
25.    // 上传失败 
26.   } 
27.  }); 

php接口

1. $file = request()->file('file'); 
2.  // 移动到框架应用根目录/public/uploads/ 目录下 
3.  $info = $file->move('public/upload/'); 
4.  if ($info) { 
5.   $path = 'public/upload/'.$info->getSaveName(); 
6.   return return_succ($path); 
7.  }

Tags: ThinkPHP5+Layui

分享到：