Jquery-文件上传会一次又一次地上传相同的文件
问题场景 我上传了一个供应商模式的文件，文件上传的很好。现在我从customer modal上传文件（两个modal都在同一个页面中），最近上传的文件（我在供应商模型中上传的文件）被重新上传。我尝试在客户模型中上传另一个文件，再次上传相同的文件（感觉就像我一次又一次地上传相同的文件，除非我没有这样做） MyJs文件代码Jquery-文件上传会一次又一次地上传相同的文件,jquery,html,file-upload,jquery-file-upload,multifile-uploader,Jquery,Html,File Upload,Jquery File Upload,Multifile Uploader,问题场景 我上传了一个供应商模式的文件，文件上传的很好。现在我从customer modal上传文件（两个modal都在同一个页面中），最近上传的文件（我在供应商模型中上传的文件）被重新上传。我尝试在客户模型中上传另一个文件，再次上传相同的文件（感觉就像我一次又一次地上传相同的文件，除非我没有这样做） MyJs文件代码 /** * Upload an Attachment to server */ $(document).on('change','#atta_file
/**
* Upload an Attachment to server
*/
$(document).on('change','#atta_file_names_d , #rec_atta_file_names_d',function()
{
var elm = $(this);
var attach_each_id = '';
var actual_file_name_idetify = '';
var attached_file_idetify = '';
var apend_checkbox = '';
var apendCheckbox='';
if($(this).is("#rec_atta_file_names_d"))
{
attached_file_idetify = 'rec_attached_file';
actual_file_name_idetify = 'rec_actual_file_name';
attach_each_id = 'rec_atta_file_names_d'
form_id = $('#rec_atta_file_names_d').parents().find('form').attr('id');
}
else
{
attached_file_idetify = 'attached_file';
actual_file_name_idetify = 'actual_file_name';
attach_each_id = 'atta_file_names_d'
form_id = $('#atta_file_names_d').parents().find('form').attr('id');
}
//add checkbox in the attached image
if($(this).hasClass("checkbox-img-d"))
{
apend_checkbox = 1;
}
var forma = $('#'+form_id)[0];
var formd = new FormData(forma);
// directory_upload_path = $('.directory-path-d').val();
directory_upload_path = $(this).parents('form').find('.directory-path-d').val();
$.each($('#'+attach_each_id).prop('files'), function(k,v)
{
formd.append("atta_file_names_d[]", $('#'+attach_each_id).prop('files')[k]);
});
formd.append("path", directory_upload_path);
var formdata = false;
$.ajax
(
{
url: baseUrl+'upload-attachment',
type: "POST",
data: formd,
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
$('#'+form_id).find('.progress-bar-load-d').show();
},
success: function(res)
{
validateLogin(res);
res = JSON.parse(res);
//console.log(res.success.length);
for(i=0; i < res.success.length; i++)
{
modified_file_name = res.success[i].success.file_name;
actual_file_name = res.success[i].file_name;
file_size = res.success[i].success.file_size;
if(apend_checkbox)
{
apendCheckbox = '<div class="chiller_cb"><input name="attachments" id="vat_2'+i+'" class="attach-checkbox-d" value="'+modified_file_name+'" type="checkbox"><label for="vat_2'+i+'"> </label><span></span></div><span class="attach-email-s">Attach to email</span>';
}
append_uploaded_doc = '<div style="display: flex; align-items: center;padding: 0px 0px 0px 20px; height: 25px;">'+ apendCheckbox +'<a href="' + baseUrl + directory_upload_path + modified_file_name+'" target="_blank" class="attachment-a-s" style="font-size:13px; margin: 0px 5px 0px 20px;word-break: break-word; float: left;">' +actual_file_name +'</a><span class="file-size-s">('+file_size+')</span><a href="javascript:void(0)" class="atta-file-s" style="float: left;margin-right: 5px;"><img src=" '+ baseUrl + 'public/admin/images/attach_cross.png" /></a><input type="hidden" name="attached_file" class="'+attached_file_idetify+'" value="'+modified_file_name+'" /><input type="hidden" name="actual_file_name" class="'+actual_file_name_idetify+'" value="'+actual_file_name+'" /></div>';
if(attach_each_id == 'atta_file_names_d')
{
$(elm).parents('form').find('.file-content-d').append(append_uploaded_doc);
}
else
{
$(elm).parents('form').find('.rec-file-content-d').append(append_uploaded_doc);
}
}
},
error: function(e)
{
},
complete: function (data)
{
$('#'+form_id).find('.progress-bar-load-d').hide();
}
}
);
//readURL(this);
});
/**
*将附件上载到服务器
*/
$（document）.on（'change'，'#atta_file_names_d，#rec_atta_file_names_d'，function（）
{
var elm=$（本）；
var attach_each_id=''；
var实际文件名标识=“”；
var随附文件标识=“”；
var apend_复选框=“”；
var apendCheckbox=''；
if（$（this）.is（“#rec_atta_file_names_d”））
{
附件标识='rec_attached_file'；
实际文件名识别='rec_实际文件名'；
attach_each_id='rec_atta_file_name_d'
form_id=$（'rec_atta_file_names_d'）.parents（）.find（'form'）.attr（'id'）；
}
其他的
{
附件标识='附件'；
实际文件名识别='实际文件名'；
attach_each_id='atta_file_name_d'
form#id=$（'#atta#u file_names_d'）.parents（）.find（'form'）.attr（'id'）；
}
//在附加图像中添加复选框
if（$（this）.hasClass（“checkbox-img-d”））
{
apend_复选框=1；
}
var forma=$（“#”+form_id）[0]；
var formd=新的FormData（forma）；
//目录上传路径=$（'.directory-path-d'）.val（）；
directory_upload_path=$（this）.parents（'form'）.find（'.directory-path-d'）.val（）；
$.each（$（'#'+附加每个id）.prop（'files'），函数（k，v）
{
formd.append（“atta_file_names_d[]”，$（“#”+attach_each_id）.prop（'files'）[k]）；
});
formd.append（“路径”，目录\上传\路径）；
var formdata=false；
$.ajax
(
{
url:baseUrl+“上传附件”，
类型：“POST”，
数据：formd，
contentType:false，
cache:false，
processData:false，
beforeSend:function（）
{
$（“#”+form_id）.find（“.progress-bar-load-d”）.show（）；
},
成功：功能（res）
{
验证洛金（res）；
res=JSON.parse（res）；
//console.log（res.success.length）；
对于（i=0；i<div class="col-sm-12 p0">
<div class="form-group">
<div class="file-upload p0_res vendor_pad_zero">
<div class="col-sm-12 p0">
<button class="file-upload-btn pull-left" id="button">
<label><i class="fa fa-fw fa-paperclip"></i> Attachments </label>
<span class="maxsize_file">Maxmimum size 300 KB</span>
</button>
</div>
<div class="clear5"></div>
<input type="hidden" class="directory-path-d" name="dir_path" value="uploads/vendor/">
<div class="image-upload-wrap image_upload_vendor_wrappp img-drag-detuct-d">
<div class="file-content-d">
</div>
<input id="atta_file_names_d" type="file" name="atta_file_names_d" class="file-upload-input" multiple="multiple" style="width:100%;">
<div class="drag-text drag_vendor_texttt">
<h3>Drag and drop a file here</h3>
</div>
<svg class="svg-progress-bar-30-right progress-bar-load-d hide-d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle class="path-progress-bar" stroke-width="10" stroke-miterlimit="10" cx="100" cy="100" r="94"></circle></svg>
</div>
</div>
</div>
</div>
附件
最大大小300 KB
在此处拖放一个文件
<div class="col-sm-6 p0">
<div class="form-group">
<div class="file-upload p0_res">
<div class="col-sm-12 p0">
<button class="file-upload-btn pull-left" type="button" onclick="$('.file-upload-input').trigger( 'click' )">
<label><b><i class="fa fa-fw fa-paperclip"></i> Attachments</b> </label> <span class="maxsize_file">Maxmimum size 300 KB</span> </button>
</div>
<div class="clear5"></div>
<input type="hidden" class="directory-path-d" name="dir_path" value="uploads/customer/">
<div class="image-upload-wrap image_upload_vendor_wrappp img-drag-detuct-d">
<div class="file-content-d">
</div>
<input class="file-upload-input valid" name="atta_file_names_d" id="atta_file_names_d" type="file" multiple="multiple" aria-invalid="false">
<div class="drag-text">
<h3>Drag/Drop files here or click the icon</h3>
</div>
<svg class="svg-progress-bar-30-right progress-bar-load-d hide-d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle class="path-progress-bar" stroke-width="10" stroke-miterlimit="10" cx="100" cy="100" r="94"></circle></svg>
</div>
</div>
</div>
</div>
附件最大大小为300 KB
将文件拖放到此处或单击图标
$(document).on('change','#atta_file_names_d , #rec_atta_file_names_d',function()
{
var elm = $(this);
var elmId = $(elm).attr('id');
var form_id = $(elm).parents('form').attr('id');
var directory_upload_path = $(this).parents('form').find('.directory-path-d').val();
var apend_checkbox = ''; // for condition validation
var apendCheckbox=''; // to use in append string
// define variables to be used within appended string
if($(elm).is("#rec_atta_file_names_d"))
{
attached_file_idetify = 'rec_attached_file';
actual_file_name_idetify = 'rec_actual_file_name';
attach_each_id = 'rec_atta_file_names_d';
}
else{
attached_file_idetify = 'attached_file';
actual_file_name_idetify = 'actual_file_name';
attach_each_id = 'atta_file_names_d';
}
//add checkbox in the attached image
if($(elm).hasClass("checkbox-img-d"))
{
apend_checkbox = 1;
}
// determine uploaded files
var files = $(this).prop('files');
if( files.length == 0){ // case: there is no file to upload
console.log('no file to upload');
return;
}
// setup form data for post request
var forma = $('#'+form_id)[0];
var formd = new FormData(forma);
formd.append("path", directory_upload_path);
$.each( files, function(k,v)
{
formd.append(elmId + '[]', files[k]);
});
$.ajax
(
{
url: baseUrl+'upload-attachment',
type: "POST",
data: formd,
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
$('#'+form_id).find('.progress-bar-load-d').show();
},
success: function(res)
{
validateLogin(res);
// console.log(res);
res = JSON.parse(res);
// console.log(res);
for(i=0; i < res.success.length; i++)
{
modified_file_name = res.success[i].success.file_name;
actual_file_name = res.success[i].file_name;
file_size = res.success[i].success.file_size;
if(apend_checkbox)
{
apendCheckbox = '<div class="chiller_cb"><input name="attachments" id="vat_2'+i+'" class="attach-checkbox-d" value="'+modified_file_name+'" type="checkbox"><label for="vat_2'+i+'"> </label><span></span></div><span class="attach-email-s">Attach to email</span>';
}
append_uploaded_doc = '<div style="display: flex; align-items: center;padding: 0px 0px 0px 20px; height: 25px;">'+ apendCheckbox +'<a href="' + baseUrl + directory_upload_path + modified_file_name+'" target="_blank" class="attachment-a-s" style="font-size:13px; margin: 0px 5px 0px 20px;word-break: break-word; float: left;">' +actual_file_name +'</a><span class="file-size-s">('+file_size+')</span><a href="javascript:void(0)" class="atta-file-s" style="float: left;margin-right: 5px;"><img src=" '+ baseUrl + 'public/admin/images/attach_cross.png" /></a><input type="hidden" name="attached_file" class="'+attached_file_idetify+'" value="'+modified_file_name+'" /><input type="hidden" name="actual_file_name" class="'+actual_file_name_idetify+'" value="'+actual_file_name+'" /></div>';
if(attach_each_id == 'atta_file_names_d')
{
$(elm).parents('form').find('.file-content-d').append(append_uploaded_doc);
}
else
{
$(elm).parents('form').find('.rec-file-content-d').append(append_uploaded_doc);
}
}
},
error: function(e)
{
},
complete: function (data)
{
$('#'+form_id).find('.progress-bar-load-d').hide();
}
}
);
});