ThinkPHP5+Layui实现图片上传加预览功能

html代码<divclass="layui-upload"><buttontype="button"class="layui-btn"id="cover">上传封面</button&g

html代码

<div class="layui-upload">
 <button type="button" class="layui-btn" id="cover">上传封面</button>
</div> 
<div class="layui-input-inline">
 <img id="preview" width="200px" height="200px">
</div>

js代码

var uploadInst = upload.render({
 elem:'#cover'
 ,url:'addCourse'
 ,accept:'file' // 允许上传的文件类型
 ,auto:true // 自动上传
 ,before:function (obj) {
 console.log(obj);
 // 预览
 obj.preview(function(index,file,result) {
 // console.log(file.name); //图片名字
 // console.log(file.type); //图片格式
 // console.log(file.size); //图片大小
 // console.log(result); //图片地址
 $('#preview').attr('src',result); //图片链接 base64
 });
 // layer.load();
 }
 // 上传成功回调
 ,done:function(res) {
 // console.log(upload);
 console.log(res);
 }
 // 上传失败回调
 ,error:function(index,upload) {
 // 上传失败
 }
 });

php接口

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

总结

以上所述是小编给大家介绍的ThinkPHP5+Layui实现图片上传加预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

thinkphp实现图片上传预览 thinkphp上传预 thinkphp layui览