layUi 上傳多圖片問題解決
阿新 • • 發佈:2019-02-19
layUi上傳多檔案刪除後繼續上傳會將刪除前的檔案繼續上傳解決辦法:
先看效果頁面
html
<div class="layui-input-block layedit-tool-help" style="float: left"> <div> <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image" style="width: 400px;height: 400px"> </div> <divclass="layui-form-item" style="margin-top: 20px"> <div style="float: left;margin-left:10px;"> <div> <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image0" style="width: 60px;height: 60px;cursor:pointer"> </div><div style="width: 15px" class="aaa"> <button type="button" class="layui-btn layui-btn-xs" id="upload" lay-data="{index:'0'}" style="margin-top: 10px;margin-left: 5px"> <i class="layui-icon"></i>上傳 </button><button type="button" class="layui-btn layui-btn-xs" id="del0" style="margin-top: 10px;margin-left: 5px;display: none"> <i class="layui-icon"></i>刪除 </button> </div> </div> <div style="float: left;margin-left:20px;"> <div> <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image1" style="width: 60px;height: 60px;cursor:pointer"> </div> <div style="width: 15px"> <button type="button" class="layui-btn layui-btn-xs " id="upload1" lay-data="{index:'1'}" style="margin-top: 10px;margin-left: 5px"> <i class="layui-icon"></i>上傳 </button> <button type="button" class="layui-btn layui-btn-xs" id="del1" style="margin-top: 10px;margin-left: 5px;display: none"> <i class="layui-icon"></i>刪除 </button> </div> </div> <div style="float: left;margin-left:20px;"> <div> <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image2" style="width: 60px;height: 60px;cursor:pointer"> </div> <div style="width: 15px"> <button type="button" class="layui-btn layui-btn-xs " id="upload2" lay-data="{index:'2'}" style="margin-top: 10px;margin-left: 5px"> <i class="layui-icon"></i>上傳 </button> <button type="button" class="layui-btn layui-btn-xs" id="del2" style="margin-top: 10px;margin-left: 5px;display: none"> <i class="layui-icon"></i>刪除 </button> </div> </div> <div style="float: left;margin-left:20px;"> <div> <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image3" style="width: 60px;height: 60px;cursor:pointer"> </div> <div style="width: 15px"> <button type="button" class="layui-btn layui-btn-xs " id="upload3" lay-data="{index:'3'}" style="margin-top: 10px;margin-left: 5px"> <i class="layui-icon"></i>上傳 </button> <button type="button" class="layui-btn layui-btn-xs" id="del3" style="margin-top: 10px;margin-left: 5px;display: none"> <i class="layui-icon"></i>刪除 </button> </div> </div> <div style="float: left;margin-left:20px;"> <div> <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image4" style="width: 60px;height: 60px;cursor:pointer"> </div> <div style="width: 15px"> <button type="button" class="layui-btn layui-btn-xs " id="upload4" lay-data="{index:'4'}" style="margin-top: 10px;margin-left: 5px"> <i class="layui-icon"></i>上傳 </button> <button type="button" class="layui-btn layui-btn-xs" id="del4" style="margin-top: 10px;margin-left: 5px;display: none"> <i class="layui-icon"></i>刪除 </button> </div> </div> </div> <div class="layui-form-item" style="width:400px;color: red"> <span> 說明:為了商品展示圖片的美觀性,請注意</br> 1、圖片需為正方形;</br> 2、建議上傳800*800的方圖,最小尺寸不得小於450*450;</br> 3、單張圖片大小不可超過2M; </span> </div> </div>
js實現
function uploadCommers(id,array) { var fileId = ""; var uploadInst = upload.render({ elem: '#'+id //繫結元素 ,url: url_fileUpload+'api/file/fileUpload?bid=&ftype=圖片' ,auto: true //選擇檔案後不自動上傳 ,multiple:true ,size:100 // ,bindAction: '#fileAction' ,before: function(obj){ var files = this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列var index1 =this.index; //讀取本地檔案 obj.preview(function(index, file, result){ if(index1 == "0"){ var tr = $("#image").attr("src",result); } var tr = $("#image"+index1).attr("src",result); $("#"+id).hide(); $("#del"+index1).show(); $("#del"+index1).on("click",function () { //請求刪除 $.ajax({ url:url_fileUpload+'api/file/deleteFile', type: "POST", data:{ "id":fileId }, dataType: "json", success: function(data){ if(data.code==0){ delete files[index];uploadInst.config.elem.next()[0].value = ''; $("#del"+index1).hide(); $("#"+id).show(); $("#image"+index1).attr("src","../../plugins/layui/images/default.jpg"); $(".aaa").load(location.href+" .aaa"); form.render(); //location.reload(); }else{ layer.msg(data.msg, {icon: 5}); } } }); }); }); } ,allDone: function(obj){ //當檔案全部被提交後,才觸發 } ,done: function(res, index, upload){ debugger if(res.code == 0) { //上傳成功 fileId = res.data.id; array.push(res.data); console.log(res.data.id) } } ,error: function(res,index, upload){ } });需將上面標黃的寫上即可;