ThinkPHP5+Layui实现图片上传加预览功能 程序员文章站 2023-11-12 23:01:22 html代码 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实现图片上传加预览功能,希望对大家有所帮助 上一篇: PHP字符串函数系列之nl2br(),在字符串中的每个新行 ( ) 之前插入 HTML 换行符br 下一篇: javascript滚轮事件基础实例讲解(37) 推荐阅读 ThinkPHP5+Layui实现图片上传加预览功能 php+croppic.js实现剪切上传图片功能 使用ThinkPHP+Uploadify实现图片上传功能 Android Retrofit实现多图片/文件、图文上传功能 Android自定义实现图片加文字功能 Vue2.0 实现移动端图片上传功能 javascript实现的图片预览和上传功能示例【兼容IE 9】 previewImage.js用代码实现类似微信朋友圈图片预览功能 VUE + UEditor 单图片跨域上传功能的实现方法 用js实现上传图片前的预览(TX的面试题)