web-dev-qa-db-ja.com

ファイルアップロードコントロールOnChangeイベントJQuery

http://dotnet.dzone.com/news/async-file-upload-jquery-and のように、AJAX、JQUERY、および.Net HTTPHandlerを使用して、ファイルをアップロードするページを構築しようとしています。

ファイルを選択してアップロードしたのは初めてです。しかし、次回ファイルを選択しても機能せず、エラーも表示されません。

次のようにjavascriptイベントバインディングを古い学校の方法に変更すると、完全に機能します。しかし、私はJQueryバインディングを使用したいと思います。私が間違ったことはありますか？ありがとう。

<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>
jqueryjquery-file-upload
4
TTCG

以下に示すように.onメソッドを使用して、再試行してください

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

これは私のために働いています。

_$(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/

0
Jack Vial

同様の問題がありました。まったく同じファイル名をまったく同じ場所にアップロードしようとした場合。その場合、変更イベントは基本的に変更なしと言います。最終的にクリック偶数を使用し、$（this）.val（）をチェックして、クリックイベントハンドラー内で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);
        });
    }
});

バインド解除は必要ないかもしれませんが、私にとってはうまくいきます。

0
mmv_sat