文件输入元素的更改事件
Posted
技术标签:
【中文标题】文件输入元素的更改事件【英文标题】：on change event for file input element 【发布时间】：2013-12-13 04:54:36 【问题描述】：我有 4 个文件输入，我希望它们在其值更改时触发上传过程。 我的意思是当您选择一张图片并在选择图片对话框上单击打开时，将触发上传图片的脚本。我使用了 onchange 事件，但我认为这不是正确的事件：
JS：
$("input[type=file]").on('change',function()
alert(this.val());//I mean name of the file
);
HTML：
<div class="form-group col-md-11 col-md-offset-1">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
</div>
我该怎么办？
【问题讨论】：
how to get all image file name before start upload? 或 ***.com/questions/1804745/… 的可能副本val() 是一个 jquery 函数，但 this 在您的上下文中是一个 DOM 对象。试试this.value 或$(this).val() 看看会发生什么。
【参考方案1】：
虽然当您选择带有输入元素的文件时会触发onchange 事件是正确的，但htmlInputElement 和type="file" 的value 属性将是fake path，例如C:\fakepath\image.jpg。
正如Jason P所说，
val()是 jquery function，但thisin your context is a DOM object。试试
this.value或$(this).val()
另一方面，正如Humberto Corrêa 指出的那样，
如果用户选择了同一张图片，则不会触发该事件，因为当前值与之前的值相同。
事实上，即使文件内容不同，除非文件名或大小也已更改，否则事件可能不会发生。 如果您希望输入事件始终触发，请参考以下代码 sn-p。
// Always fire input event on file inputs
// even when file name or size hasn't changed
var emptyFileList = $('<input type="file">').get(0).files;
$input.filter('[type=file]').on('click', function()
// 1. Backup current file list
$(this).prop('originalFile', this.files);
// 2. Clear current file list
$(this).prop('files', emptyFileList);
).on('input', function()
// 3. If the new file list is empty, try to restore previous file list
if (this.files === emptyFileList)
this.files = $(this).prop('originalFile');
);
this.files 是一个 FileList 对象，包含使用输入选择的所有文件。
【讨论】：
【参考方案2】：对于想要直接在文件输入上使用 onchange 事件的人，设置onchange="somefunction()，示例代码来自the link：
<html>
<body>
<script language="javascript">
function inform()
document.form1.msg.value = "Filename has been changed";
</script>
<form name="form1">
Please choose a file.
<input type="file" name="uploadbox" size="35" onChange='inform()'>
<br><br>
Message:
<input type="text" name="msg" size="40">
</form>
</body>
</html>
【讨论】：
【参考方案3】：OnChange 事件是一个不错的选择。但是如果用户选择了同一张图片，则不会触发该事件，因为当前值与之前的值相同。
图片是一样的，比如宽度改变了，应该上传到服务器。
为防止出现此问题，您可以使用以下代码：
$(document).ready(function()
$("input[type=file]").click(function()
$(this).val("");
);
$("input[type=file]").change(function()
alert($(this).val());
);
);
【讨论】：
看起来firefox会触发事件，即使它是同一个图像，但chrome不会。【参考方案4】：为文件输入提供唯一的类和不同的 id
$("#tab-content").on('change',class,function()
var id=$(this).attr('id');
$("#"+id).trigger(your function);
//for name of file input $("#"+id).attr("name");
);
【讨论】：
这确实有效。将事件绑定到父元素每次实际更改时都会触发更改事件。【参考方案5】：使用元素的files文件列表代替val()
$("input[type=file]").on('change',function()
alert(this.files[0].name);
);
【讨论】：
change事件什么时候触发？是我们选择一个新文件的时候还是文件完全加载的时候？如果是前者，那么当文件完全加载时如何触发事件？以上是关于文件输入元素的更改事件的主要内容，如果未能解决你的问题，请参考以下文章