手动上传
上一篇，我们知道 LayUI 默认会自动上传文件，那么我们怎么关闭自动上传，实现手动点击上传呢？
auto 参数
<script> layui.use('upload', function(){ var upload = layui.upload; //执行实例 upload.render({ elem: '#up_function' //绑定元素 ,url: '/upfile1/' //上传接口 ,accept: 'file' //限制上传文件类型 ,field: 'upload_list' //传给FastApi后端的参数名 ,auto: false //关闭自动上传 ,done: function(res){ //上传完毕回调 if (res.code == 0){ //请求成功后的动作 } } ,error: function(){ //请求异常回调 } }); }); </script> 复制代码
如上，我们增加 auto：false 参数即可。
效果
网络异常，图片无法展示
|
我们点击显示文件信息才会上传。
网络异常，图片无法展示
|
上传成功后提示
在 done 方法中添加提示
<script> layui.use('upload', function(){ var upload = layui.upload; //执行实例 upload.render({ elem: '#up_function' //绑定元素 ,url: '/upfile1/' //上传接口 ,accept: 'file' //限制上传文件类型 ,field: 'upload_list' //传给FastApi后端的参数名 //,auto: false //关闭自动上传 ,done: function(res){ //上传完毕回调 if (res.code == 0){ var layer = layui.layer; layer.msg('上传成功！'); console.log(res); } } ,error: function(){ //请求异常回调 } }); }); </script> 复制代码
效果
为了方便演示，我们选择自动上传并且进行提示。
网络异常，图片无法展示
|
可以看到，后台处理完后，返回 code=0，LayUI 即可对上传结果进行判断。
后台需要返回的数据格式
return {'result':'success!','code':0} 复制代码
其中，code 是必须的。
预览
为了方便演示，我们选择图片进行上传。使用LayUI的obj.preview来实现预览。
代码
html 代码：
<div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1"> <p id="demoText"></p> </div> </div> 复制代码
LayUI 的前端脚本
<script> layui.use('upload', function(){ var upload = layui.upload, $ = layui.jquery; //普通图片上传 var uploadInst = upload.render({ elem: '#test1' ,url: '/upfile1/' //改成您自己的上传接口 ,field: 'upload_list' //传给FastApi后端的参数名 ,accept: 'images' ,auto: false ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#demo1').attr('src', result); //图片链接（base64） }); } ,done: function(res){ //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功 } ,error: function(){ //演示失败状态，并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); }); 复制代码
效果
网络异常，图片无法展示
|
感谢您的阅读，别忘了关注，点赞，评论，转发四连哟！
