文件输入元素的更改事件
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,但this
in 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事件什么时候触发?是我们选择一个新文件的时候还是文件完全加载的时候?如果是前者,那么当文件完全加载时如何触发事件?以上是关于文件输入元素的更改事件的主要内容,如果未能解决你的问题,请参考以下文章