文件上传控件 OnChange 事件 JQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23424417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File Upload control OnChange Event JQuery
提问by TTCG
I am trying to build the page to upload the file by using AJAX, JQUERY and .Net HTTPHandler as in http://dotnet.dzone.com/news/async-file-upload-jquery-and
我正在尝试使用 AJAX、JQUERY 和 .Net HTTPHandler 构建页面以上传文件，如http://dotnet.dzone.com/news/async-file-upload-jquery-and
It works only for the first time I chose a file and uploaded it. But it doesn't work when I select the file next time and doesn't show any error.
它仅在我第一次选择文件并上传时有效。但是当我下次选择文件并且没有显示任何错误时它不起作用。
If I change the javascript event binding to the old school way like the following, it works perfectly. But I want to use the JQuery Binding. Is there anything I did wrongly? Thanks.
如果我将 javascript 事件绑定更改为如下所示的旧学校方式，它可以完美运行。但我想使用 JQuery 绑定。我做错了什么吗？谢谢。
<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" onchange="return ajaxFileUpload();">
HTML Code:
HTML代码：
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="StudentID" HeaderText="ID" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:TemplateField>
<ItemTemplate>
<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="fileToUpload" >
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
JQuery Binding Code:
JQuery 绑定代码：
<script>
$().ready(function () {
$(".fileToUpload").change(function() {
$.ajaxFileUpload
(
{
url: 'AJaxUploadHandler.ashx',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
data: { name: 'logan', id: 'id' },
success: function (data, status) {
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
console.log(data.error);
} else {
console.log(data.msg);
}
}
},
error: function (data, status, e) {
alert(e);
}
}
)
return false;
});
});
</script>
回答by Neel
Use .on method as shown below and try again
使用如下所示的 .on 方法并重试
$(".fileToUpload").on('change', function() {
///// Your code
});
回答by Hyman Vial
This has worked for me.
这对我有用。
$(document).on("change", "#inputId", function(){
//Do something
});
For performance it is better to avoiding using $(document)and call the on() method on a wrapper div like this.
为了提高性能，最好避免$(document)在这样的包装 div 上使用和调用 on() 方法。
<div id="wrapper">
<input id="#inputId" type="file"/>
</div>
$("#wrapper").on("change", "#inputId", function(){
//Do something
});
It has to do with Direct and delegated events: http://api.jquery.com/on/
它与直接和委托事件有关：http: //api.jquery.com/on/
回答by mmv_sat
I had a similar issue. If I tried to upload the exact same file name at the exact same location. Then the change event would basically say no change. I ended up using a click even, checked for $(this).val() and call the the change event inside the click event handler.
我有一个类似的问题。如果我尝试在完全相同的位置上传完全相同的文件名。然后更改事件基本上会说没有更改。我最终使用了单击，检查了 $(this).val() 并在单击事件处理程序中调用了更改事件。
$("input[type='file']").on('click', function () {
if(!$(this).val()){
//Initial Case when no document has been uploaded
$("input[type='file']").change(function(){
upload_file_setup(this);
});
}else{
//Subsequent cases when the exact same document will be uploaded several times
$(this).val('');
$("input[type='file']").unbind('change');
$("input[type='file']").change(function(){
upload_file_setup(this);
});
}
});
The unbind may not be necessary but it works for me.
解除绑定可能不是必需的，但它对我有用。
