手机版

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

时间:2021-08-30 来源:互联网 编辑:宝哥软件园 浏览:

超文本标记语言代码

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实现图片上传加预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

版权声明:ThinkPHP5 Layui实现图片上传加预览功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。