文件上传控件OnChange Event JQuery

Question

我正在尝试构建页面以使用AJAX,JQUERY和.Net HTTPHandler上传文件,如http://dotnet.dzone.com/news/async-file-upload-jquery-and

它仅在我第一次选择文件并上传时才有效.但是当我下次选择文件并且没有显示任何错误时它不起作用.

如果我将javascript事件绑定更改为旧学校方式,如下所示,它可以完美地工作.但是我想使用JQuery Binding.有什么我做错了吗？谢谢.

<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" onchange="return ajaxFileUpload();">

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绑定代码:

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

Answer 1

使用.on方法如下所示,然后重试

  $(".fileToUpload").on('change', function() {
         ///// Your code
});