使用layui的多圖上傳時發現，圖片上傳到后臺，提交表單后，圖片順序與選擇的順序不一致并出現圖片重復上傳 后發現layui是將多圖在前臺轉為隊列，一張張向后臺傳輸，后臺處理數據后再回傳到前臺。但是傳輸和回填數據是異步進行的，導致回填數據的順序可能與前臺添加數據順序不一致。控制臺中打印choose與done的index結果如下圖：可以看到choose與done的index不一致。 下面是**錯誤**示范 html: ~~~html <div class="layui-form-item fl mr20 mb20"> <button type="button" class="layui-btn" id="test2">圖片上傳</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 預覽圖： <div class="imglist mt10" id="demo2"></div> </blockquote> </div> ~~~ js: ~~~javascript //多圖片上傳 upload.render({ elem: '#test2' ,url: "{:url('/api/Upload/upload_img')}" ,accept: 'images' ,size: 5120 ,multiple: true ,number: 9 ,choose: function(obj){ //預讀本地文件示例，不支持ie8 var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列 obj.preview(function(index, file, result){ var str = '<div class="layui-inline">'+ '<div class="handle"><i class="layui-icon layui-icon-delete fr del-img"></i></div>' + '<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'+ '</div>' $('#demo2').append(str) }); } ,done: function(res,index){ //上傳完畢 delete this.files[index]//移除隊列中文件 ---這很重要防止之前的圖片重復上傳 if(res.code==0){ var images = $('input[name=images]').val(); if(images==''){ images = res.data.src; }else{ images += ','; images += res.data.src; } $('input[name=images]').val(images) }else{ layer.msg(res.msg); } } }); //移除圖片 $(document).on("click",".del-img",function(e){ var index = $(this).parent().parent().index(); var images = $('input[name=images]').val(); if(images==''){ images_new = ''; }else{ var strs=images.split(","); strs.splice(index,1); images_new = strs.join(","); } $("#demo2").find(".layui-inline")[index].remove(); $('input[name=images]').val(images_new) }); ~~~ 上面的思路是在done中每次將回填數據依次拼接到input中，提交時將input值傳到后臺，這就導致前臺看起來順序正確，實際順序卻是錯的 于是改變思路，既然選擇圖片預覽時的順序是正確的，并且choose及done的index是相同的，那么可以將后臺回傳的圖片地址以元素節點屬性值的方式寫入到預覽圖片中。表單提交的時候獲取圖片元素列表再將元素列表中對應的屬性值拼接為圖片列表值即可。 新方案如下： ~~~javascript //多圖片上傳 upload.render({ elem: '#test2' ,url: "{:url('/api/Upload/upload_img')}" ,accept: 'images' ,size: 5120 ,multiple: true ,number:9 ,choose: function(obj){ var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列 //讀取本地文件 obj.preview(function(index, file, result){ console.log('choose'+index) var tr = $(['<div class="layui-inline" >'+ '<div class="handle"><i class="layui-icon layui-icon-delete fr del-img" id="del-'+index+'" data-src=""></i></div>' + '<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'+ '</div>'].join('')); $('#demo2').append(tr) }); } ,done: function(res,index){ delete this.files[index]//移除隊列中文件 ---這很重要防止之前的圖片重復上傳 console.log('done'+index) //上傳完畢 if(res.code==0){ $('#del-'+index).attr('data-src',res.data.src) if($('.layui-upload-img').length>8){ $('#test2').addClass("layui-btn-disabled"); $('#test2').attr("disabled",true); } }else{ layer.msg(res.msg); } } }); ~~~ 表單提交時獲取圖片 ~~~javascript //圖片提取并限制數量 var images_ids = $('.del-img'); if(images_ids.length>9){ layer.msg("圖片最多選擇9張"); return false; } if(images_ids.length){ var images = ''; $.each(images_ids,function (index, val) { if(images == ''){ images +=$(val).attr('data-src') }else{ images += ','+$(val).attr('data-src') } }); $(data.form).append('<input name="images" type="hidden" value="'+images+'">');//插入表單 } ~~~ ***！！！特別注意！！！多圖上傳在done中必須清除隊列中上傳完成的圖片，否則文件將會被重復上傳***