上传文件、图片去重问题
图片:本地分片上传到图片服务器,再从图片获取地址回显到页面
图片上传到图片服务器时偶发性出现一张图片被上传了两次,由于没有上传的代码 ,没有排查出为何被上传两次返回两个地址具体原因是什么(怀疑是异步分片上传问题),但是可以解决页面回显两张同样图片问题,这个问题和多图片依次上传但是防止上传同一张照片问题一致
解决方案(相当拙劣,比较笨拙)
增加file_name记录图片本地名字
<div class="imgBox">
<div class="imgItem">
<img class="btUp" src="{{asset('application/kaoQin/wap/img/addImage.png')}}"/>
<input type="file" accept="image/*" name="touxiang" id="upload" style="display: none;"/>
**<input type="hidden" value="" id = 'file_name'>**
</div>
</div>
//Ajax提交
//Ajax提交
$.ajax({
url: 'https://erp-img.pingnuosoft.com/utils/upload' ,
{{--url: "{{url("/wap/kq/vacation/uploadDoc")}}",--}}
type: "POST",
data: form,
dataType:'JSON',
async: true, //异步
processData: false, //很重要,告诉jquery不要对form进行处理
contentType: false, //很重要,指定为false才能形成正确的Content-Type
success: function(res){
// layer.closeAll();
if(res.state=='finish'){
var file_names = $('#file_name').val();
console.log(file_names+'开始')
if (file_names != ''){
var arr_file_names = file_names.split(',');
if (arr_file_names.indexOf(res.localname) == -1){
$(".imgBox").css("display", "table");
var html='<div class="imgItem">\n' +
'\t\t\t\t\t<img class="upImg" remote-path="'+res.url+'" data-preview-src="" data-preview-group="1" src="'+res.url+'" data-local-name = "'+res.localname+'" />\n' +
'\t\t\t\t\t<img class="deleteImg" src="/application/kaoQin/wap/img/deleteIcon.png">\n' +
'\t\t\t\t</div>'
$(".imgBox").append(html)
}
file_names = file_names+','+ res.localname ;
$('#file_name').val(file_names);
}else {
var html='<div class="imgItem">\n' +
'\t\t\t\t\t<img class="upImg" remote-path="'+res.url+'" data-preview-src="" data-preview-group="1" src="'+res.url+'" data-local-name = "'+res.localname+'"/>\n' +
'\t\t\t\t\t<img class="deleteImg" src="/application/kaoQin/wap/img/deleteIcon.png">\n' +
'\t\t\t\t</div>'
$(".imgBox").append(html)
$('#file_name').val(res.localname)
}
layer.closeAll();
}else if(res.state=='unfinished'){
}else{
alert(res.msg);
layer.closeAll();
}
}
});
同时删除需要注意将本地名称去除,否则无法再次上传
`$('body').on('click','.deleteImg',function () {
//删除时重复照片问题
var current_name = $(this).prev().attr('data-local-name');
var file_names = $('#file_name').val();
var arr_file_names = file_names.split(',');
//删除数组中指定元素
arr_file_names = delArrayItem(arr_file_names,current_name);
file_names = arr_file_names.join(',');
$('#file_name').val(file_names);
$("#upload").val("");
$(this).parent().remove()
})
注意:明明写的是网页版,但是在安卓系统上可以限制住,ios系统没有限制住图片重复问题,原因还在排查中