Javascript 关于文件输入元素的更改事件

我有4个文件输入，我希望它们在值更改时触发上载过程。 我的意思是，当您选择一张图片并单击“选择图像”对话框上的“打开”时，将触发上载图片的脚本。我使用了onchange事件，但我认为这不是正确的事件：

JS:

$("input[type=file]").on('change',function(){
    alert(this.val());//I mean name of the file
});

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

HTML:

$("input[type=file]").on('change',function(){
    alert(this.val());//I mean name of the file
});

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

---

我应该怎么做？

使用元素的

文件
文件列表，而不是
val（）

为文件输入指定唯一的类和不同的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
事件是一个不错的选择。但如果用户选择相同的图像，则不会触发该事件，因为当前值与上一个值相同

例如，图像是相同的，宽度改变了，应该上传到服务器

要防止此问题，可以使用以下代码：

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

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

对于希望在文件输入中直接使用onchange事件的用户，请设置
onchange=“somefunction（）
，示例代码来自：


函数通知（）{
document.form1.msg.value=“文件名已更改”；
}
请选择一个文件。



信息：
或
val（）的可能重复项
是一个jquery函数，但是
您上下文中的
此
是一个DOM对象。请尝试
此.value
或
$（此）.val（）
看看会发生什么。firefox似乎会触发事件，即使它是相同的图像，但chrome不会。更改事件何时触发？是在我们选择一个新文件时还是在文件完全加载时？如果是前者，那么在文件完全加载时如何触发事件？这实际上是可行的。将事件绑定到parent元素每次实际更改时都会触发更改事件。