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();">

enter image description here

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

Answer 2

这对我有用。

$(document).on("change", "#inputId", function(){
     //Do something
});

为了提高性能，最好避免使用$(document)并在这样的包装器div上调用on（）方法。

<div id="wrapper">
   <input id="#inputId" type="file"/>
</div>

$("#wrapper").on("change", "#inputId", function(){
     //Do something
});

它与直接和委派事件有关：http://api.jquery.com/on/

Answer 3

我有类似的问题。如果我尝试在完全相同的位置上传完全相同的文件名。然后改变事件基本上会说没有变化。我最终使用了一个单击，检查$（this）.val（）并在click事件处理程序中调用change事件。

$("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);
        });
    }
});

解开可能没有必要，但对我有用。

文件上传控件OnChange Event JQuery

3 个答案: