文件输入元素的更改事件

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

我该怎么办？

来源

2013-11-27 Ramin

可能重复[？如何开始前让所有图像文件名上传]（http://stackoverflow.com/questions/18400686/how-to-all-image-file-name-before-start-upload）或http://stackoverflow.com/questions/1804745/get-the-filename-through-javascript – ahren

val（）是一个jquery函数，但是你的上下文中的this是一个DOM对象。试试'this.value'或$（this）.val（）'看看会发生什么。 –

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

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

来源

2013-11-27 13:58:32 techfoobar

更改事件何时触发？是当我们选择一个新文件或文件完全加载时？如果它的前者那么我怎么能在文件加载完成时触发事件？ –

提供独特的等级和不同的ID文件输入

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

来源

2013-11-27 14:00:43 AAA

这实际上有效。将事件绑定到父元素会在每次实际更改时触发更改事件。 – russinkungen

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

图像与宽度更改相同，例如，它应该上传到服务器。

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

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

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

的

来源

2013-11-27 15:52:35

看来firefox会触发事件，即使它是相同的图像，但铬不会。 – ooolala

文件输入元素的更改事件

回答

相关问题