Question

我有一个隐藏的输入[type = file]和一个单独的按钮，触发点击这个隐藏的输入。如何检测此隐藏输入中的值更改，即用户何时选择了文件？

<form id="photo_upload_form" method="POST" enctype="multipart/form-data">
    <button >Upload a Photo</button>
    <input name="file" type="file" hidden />
</form>

Javascript：

$('#photo_upload_form button').click(function(){
        $('input[type="file"]').trigger('click');
});
$('input[type="file"]').change(function(){
    alert('Change !');
});

编辑：我的按钮点击提交表单，所以我不得不使用preventDefault！

Answer 1

使用onchange input[type=“file”]

<input type="file" onchange="myFunction()">

这里是demo http://jsfiddle.net/qs4y0rLe/

作为您的代码，如下所示更改

 $('input[type="file"]').on('change',function(){
            alert('Change !');
    });

关于jquery .on()，将一个或多个事件的事件处理函数附加到所选元素。更多 - ＆gt; http://api.jquery.com/on/

http://jsfiddle.net/qs4y0rLe/1/

Answer 2

它仍然会在输入[type = file]上触发更改事件，比如

$("input[type=file]").on('change',function() {});

检测隐藏输入的变化[type =“file”]

2 个答案: