1. 程式人生 > >layUi 上傳多圖片問題解決

layUi 上傳多圖片問題解決

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>
    <div 
class="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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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){

        }
    });
需將上面標黃的寫上即可;