jquery - 文件上传控件 OnChange 事件 JQuery

Question

我正在尝试使用 AJAX、JQUERY 和 .Net HTTPHandler 构建页面来上传文件，如 http://dotnet.dzone.com/news/async-file-upload-jquery-and 中所示。

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

如果我将 javascript 事件绑定(bind)更改为如下所示的旧式方式，则它可以完美运行。但我想使用 JQuery 绑定(bind)。难道是我做错了什么？谢谢。

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

<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
});