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

超文本标记语言代码

div class='layui-upload '按钮类型=' button ' class=' layui-BTN ' id=' cover '上传封面/button/div div class=' layui-input-inline ' img id=' preview ' width=' 200px ' height=' 200px '/div js代码

var uploadInst=上传。render({ elem : ' # cover '，url:'addCourse '，accept:'file' //允许上传的文件类型，auto:true //自动上传，先于：函数(obj){ console。日志(obj)；//预览obj.preview(函数（索引、文件、结果){//控制台。日志(文件。姓名)；//图片名字//控制台。日志(文件。类型)；//图片格式//控制台。日志(文件。大小)；//图片大小//console.log(结果);//图片地址$(“# preview”).attr('src '，结果);//图片链接base64 })；//图层。load()；} //上传成功回调，搞定：功能(RES){//控制台。日志(上传);控制台。日志(RES)；} //上传失败回调，error:function(索引，上传){ //上传失败} });服务器端编程语言(专业超文本预处理器的缩写)接口

$ file=request()-file(' file ')；//移动到框架应用根目录/public/上传/目录下$ info=$ file-move(' public/upload/')；if($ info){ $ path=' public/upload/' .$ info-getSaveName()；return _ succ($ path)；}

总结

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