这似乎是一件很简单的事情,但我无法解决。我一直在使用<input type=file />
元素上的onchange
事件,并且它可以正常工作。一旦用户浏览并选择文件,我就会得到路径并使用我的自定义JS函数上传它。
问题在于,如果用户连续两次选择相同的文件,则onchange
不会触发(这很有道理,因为没有任何变化),但在我的情况下,捕获该事件并获取路径并上传对我很重要。
(类似于使用jQuery清除<input type='file' />,我不确定是否应将其解决为重复项)
这似乎是一件很简单的事情,但我无法解决。我一直在使用<input type=file />
元素上的onchange
事件,并且它可以正常工作。一旦用户浏览并选择文件,我就会得到路径并使用我的自定义JS函数上传它。
问题在于,如果用户连续两次选择相同的文件,则onchange
不会触发(这很有道理,因为没有任何变化),但在我的情况下,捕获该事件并获取路径并上传对我很重要。
(类似于使用jQuery清除<input type='file' />,我不确定是否应将其解决为重复项)
您可以让“选择文件”按钮在单击时清除输入内容,这样即使他们选择相同的文件,您的事件仍将触发。当然,然后您的onchange处理程序将必须检查空值,但如果它要使用该值上传文件,那么它应该做类似或更多的工作...
document.getElementById('files').value = "";
在文件输入框上,你不能第二次触发change事件,但是你可以在span上触发change事件。以下代码适用于Chrome和Firefox浏览器,我没有在IE中测试过。
$('#change_span').bind('change',function(){
alert($('#file_1').val())
})
<span id='change_span'><input id="file_1" type="file"></span>
<span id='change_span'><input id="file_1" type="file"></span>
实际上没有什么办法可以解决这个问题。如果您添加任何其他侦听器或计时器,那么即使用户不想上传文件(例如,使用onclick),您也可能会上传文件。您确定不能以其他方式上传相同的文件吗?上传开始后清除输入内容怎么样(或者如果无法清除,则替换为新的输入)。
function resetFileInput ($element) {
var clone = $element.clone(false, false);
$element.replaceWith(clone);
}
然后使用live:
$('#element_id').live('change', function(){
...
});
对我来说很有效!
<form enctype='multipart/form-data'>
<input onchange="alert(this.value); return false;" type='file'>
<br>
<input type='submit' value='Upload'>
</form>
在Firefox中它运行良好,但是对于Chrome,您需要在警告后添加this.value=null;
。
在表单中保留2个元素 - 其中一个是隐藏的,它将触发上传事件。
<input hidden id="file_hidden" (onchange)="uploadFile()" type="file">
当执行uploadFile时,将文件内容放入file_1并将file_hidden的值重置为''。这样,您的输入始终具有新值。
这种行为只在IE浏览器中出现吗?如果是这样,可能与此问题有关:
jQuery change event on <select> not firing in IE
本质上:您可能需要检查onClick事件。