Layui 完美实现图片上传预览 JavaScript 471 一页书 2021-03-08 16:53:48 ```javascript 1，先引用基本jq脚本及相关依赖脚本 <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/layui/layui.js"></script> 2，前端页面 <span>上传图片:</span> <div class="upload" id="test1">+</div> <div class="layui-upload-list"></div> <div><button type="button" class="layui-btn-radius" id="save"><i class="layui-icon "></i>点击上传</button></div> 3，js方法 layui.use(['upload', 'jquery'], function () { var upload = layui.upload; var $ = layui.jquery; /执行实例 var uploadInst = upload.render({ elem: '#test1', /绑定元素 multiple: true, auto: false, acceptMime: 'image/*', bindAction: "#save",/绑定上传 url: '/SendNotice/Upload', /上传接口 choose: function (obj) { /obj参数包含的信息，跟 choose回调完全一致 /将每次选择的文件追加到文件队列 let UPLOAD_FILES = obj.pushFile(); for (let x in UPLOAD_FILES) { delete UPLOAD_FILES[x]; } /layer.load(); /上传loading obj.preview(function (index, file, result) { files = obj.pushFile(); $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">') $('#remove_' + index).bind('dblclick', function () {/双击删除指定预上传图片 delete files[index];/删除指定图片 $(this).remove(); }) /console.log(1, index); /得到文件索引 /console.log(2, file.name); /得到文件对象 /console.log(3, result); /得到文件base64编码，比如图片 }) }, done: function (res) { imgs = imgs.concat(res.Data) console.log(imgs) if (res.Result) { layer.msg("图片上传成功！", { icon: 1, time: 1000 }); } /上传完毕回调 }, error: function () { /请求异常回调 } }); }); ```