logo标签列表

<input type='file' />中onchange事件的替代方法是什么？

javascripthtmlfilefile-uploaddom-events
16

这似乎是一件很简单的事情，但我无法解决。我一直在使用<input type=file />元素上的onchange事件，并且它可以正常工作。一旦用户浏览并选择文件，我就会得到路径并使用我的自定义JS函数上传它。

问题在于，如果用户连续两次选择相同的文件，则onchange不会触发（这很有道理，因为没有任何变化），但在我的情况下，捕获该事件并获取路径并上传对我很重要。

（类似于使用jQuery清除<input type='file' />，我不确定是否应将其解决为重复项）

9个回答
9
你可以使用JavaScript删除输入框并创建一个完全相同的新输入框，新输入框将是空的。
这个文本框是只读的，我不认为我能清空它吗？ - Yasir Laghari
1
只有用户遵守只读限制，如果我理解你的意思，否则你可以删除输入并使用JavaScript创建一个新的 - 新的一定是空的。 - raveren
2

您可以让“选择文件”按钮在单击时清除输入内容，这样即使他们选择相同的文件，您的事件仍将触发。当然，然后您的onchange处理程序将必须检查空值，但如果它要使用该值上传文件，那么它应该做类似或更多的工作...

谢谢大家，但是value字段不是只读的吗？我不认为我可以将它的值更改为空。 - Yasir Laghari
1
你在表单中还有其他输入吗？如果没有，你可以直接重置表单。 - tfwright
Reset() 可以使用，但我认为 .replaceWith 是一个更干净的解决方案（因为副作用的可能性较小）。 - Yasir Laghari
1
在您的 onchange 回调函数中将输入的值设置为“”。这样，如果下一次选择相同的文件，onchange 事件仍会触发，因为值与“”不同。
document.getElementById('files').value = "";
1

在文件输入框上，你不能第二次触发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>

1

实际上没有什么办法可以解决这个问题。如果您添加任何其他侦听器或计时器，那么即使用户不想上传文件（例如，使用onclick），您也可能会上传文件。您确定不能以其他方式上传相同的文件吗？上传开始后清除输入内容怎么样（或者如果无法清除，则替换为新的输入）。

替换成功了！谢谢Marius。 在这里找到了解决方案：https://dev59.com/TnNA5IYBdhLWcg3wPLL- - Yasir Laghari
0
function resetFileInput ($element) {
  var clone = $element.clone(false, false);
  $element.replaceWith(clone);
}

然后使用live：

$('#element_id').live('change', function(){
...
});

对我来说很有效！

0
如果您不想使用jQuery
<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;。

0

在表单中保留2个元素 - 其中一个是隐藏的，它将触发上传事件。

<input hidden id="file_hidden" (onchange)="uploadFile()" type="file">

当执行uploadFile时，将文件内容放入file_1并将file_hidden的值重置为''。这样，您的输入始终具有新值。

0
谢谢Daniel尝试使用OnClick，但它在用户选择文件之前被调用，所以没有用:( - Yasir Laghari
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接