on文件输入元素的更改事件

on change event for file input element

本文关键字：事件 元素 文件 输入 on      更新时间：2023-11-01

我有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>

我该怎么办？

OnChange事件是一个不错的选择。但是，如果用户选择了相同的图像，则不会触发该事件，因为当前值与以前的值相同。

例如，图像是相同的，但宽度发生了变化，并且应该上传到服务器。

为了防止这个问题，你可以使用以下代码：

$(document).ready(function(){
    $("input[type=file]").click(function(){
        $(this).val("");
    });
    $("input[type=file]").change(function(){
        alert($(this).val());
    });
});

使用元素的files文件列表，而不是val()

$("input[type=file]").on('change',function(){
    alert(this.files[0].name);
});

对于想要在文件输入中直接使用onchange事件的人，请设置onchange="somefunction()，链接中的示例代码：

<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>

为文件输入提供唯一的类和不同的id

           $("#tab-content").on('change',class,function()
               {
                  var id=$(this).attr('id');
                      $("#"+id).trigger(your function); 
               //for name of file input  $("#"+id).attr("name");
               });

尽管选择带有输入元素的文件时触发了onchange事件，但带有type="file"的HTMLInputElement的value属性将是一个伪路径，如C:'fakepath'image.jpg。

正如Jason p所说，

val()是一个jquery函数，但上下文中的this是一个DOM对象。

尝试this.value或$(this).val()

另一方面，正如Humberto Corrêa所指出的，

如果用户选择了相同的图像，则不会触发该事件，因为当前值与以前的值相同。

事实是，即使文件内容不同，除非文件名或大小也发生了更改，否则事件也可能不会发生。如果您希望输入事件始终触发，请参阅以下代码片段。

// 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对象，包含通过输入选择的所有文件。

相关文章：