我有一个包含使用Bootstrap 4实现的输入文件的表单。此输入文件无法立即使用，因为它需要Javascript才能按预期工作：用户单击“浏览文件”按钮，将打开一个窗口，用户选择他们的文件，单击打开/选择，文件名最终显示在输入字段上。
<form id="my_form" name="my_form" method="post" action="/action" enctype="multipart/form-data">
<div class="input-group" id="div_input">
<div class="custom-file">
<input type="file" accept=".pdf" class="custom-file-input" id="myInputGroup" name="userfile" aria-describedby="btnUpload">
<label class="custom-file-label" for="myInputGroup" data-browse="Browse files" id="input_label_identificacion">Select a file</label>
</div>
<div class="input-group-append" id="divBtnUpload">
<button class="btn btn-outline-info" type="submit" value="submitFile" id="btnUpload" title="Upload your file" disabled>Upload</button>
</div>
</div>
</form>
这是使其工作的javascript文件：
$('#myInputGroup').on('change',function(e){
{{--//get the file name--}}
var fileName = e.target.files[0].name;
{{--replace the "Choose a file" label--}}
$(this).next('.custom-file-label').html(fileName);
enableUploadButton(inputIdentificacionId,btnIdentificacionId);
document.getElementById('my_form').addEventListener('submit', function(evt) {
evt.preventDefault();
$('#'+btnIdentificacionId).prop("disabled",true);
upload(this.action,'userfile',e.target.files[0]);
}, {once: true});
});
我已经实现了一个javascript按钮“上传文件”，用户单击该按钮即可上传文件。到现在为止还挺好。
我看到的问题是，如果用户浏览了一个文件，将其选中，然后如果用户再次单击“浏览文件”按钮，则上次选择的文件将被发送两次，或者至少是用户选择一个文件的次数。文件。
因此，我想到了在用户浏览文件时清除输入文件。到目前为止，这是我在javascript中尝试过的内容：
$('#myInputGroup').on('click',function (e){
document.getElementById('inputGroup_solicitud').value= null;
//console.log('User is browsing ...');
//console.log(this.files);
inputGroup_solicitud.value='';//My attempt to clear the input but it doesn't work
e.target.files=null;
this.files=null;
});
但是，问题仍然在发生。如果用户再次单击并选择任何文件，则上载功能会将上次选择的文件发送到服务器两次，或者至少发送用户单击“浏览按钮”并选择文件的次数。
关于可能重复的问题的注意事项 此答案不能帮助我解决我的问题，因为问题实际上是，每次用户浏览文件时都会添加“ addEventListener（）”。这个细节在其他问题中没有解释。
如何清除输入文件以防止发送多个文件？
每次更改事件触发时，您都将添加一个新的事件侦听器。因此，在用户单击“提交”时，将触发多个事件侦听器：每次浏览文件时都会触发一个。这些中的每一个都上载文件，因此导致您的问题。
要修复它，您需要移动代码块：
document.getElementById('my_form').addEventListener('submit'
...
在封闭的更改处理程序之外。您将需要在两个范围之外的var来在两个事件处理程序之间共享文件。像这样（未经测试！）：
// Both event handler can access this var
var file;
$('#myInputGroup').on('change',function(e){
var fileName = e.target.files[0].name;
$(this).next('.custom-file-label').html(fileName);
enableUploadButton(inputIdentificacionId,btnIdentificacionId);
// Store the file to be uploaded
file = e.target.files[0];
});
document.getElementById('my_form').addEventListener('submit', function(evt) {
evt.preventDefault();
$('#'+btnIdentificacionId).prop("disabled",true);
// Retrieve and upload your file
upload(this.action,'userfile',file);
}, {once: true});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句