on file事件的变更事件 [英] on change event for file input element

问题描述

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

I have 4 file inputs that I want them trigger upload proccess when their value is changed. I mean when you select a picture and click open on select image dialog, the script to upload the picture be triggered. I've used onchange event but I think this is not the right event:

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

The OnChange event is a good choice. But if a user select the same image, the event will not be triggered because the current value is the same as the previous.

例如，图像宽度发生变化，应该上传到服务器。

The image is the same with a width changed, for example, and it should be uploaded to the server.

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

To prevent this problem you could to use the following code:

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

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

这篇关于on file事件的变更事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！