文件输入元素的更改事件

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 事件是正确的,但htmlInputElementtype="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事件什么时候触发?是我们选择一个新文件的时候还是文件完全加载的时候?如果是前者,那么当文件完全加载时如何触发事件?

以上是关于文件输入元素的更改事件的主要内容,如果未能解决你的问题,请参考以下文章

`input` 元素的“更改”和“输入”事件之间的区别

当弹出窗口中的 JavaScript 更改输入元素时引发“onChange”事件

当输入的值以编程方式更改时触发更改事件

非输入元素的JavaScript事件监听器[重复]

jQuery更改事件未更新

为啥 iPhone 的 Safari 不触发输入类型 = 文件的更改事件?