AJAX 画像アップロードの問題を解決する方法: フォームの送信とアップロードのトリガー?

Ajax 対応画像アップロード

画像アップロードのためにフォームを AJAX に変換しようとすると、フォームが応答しないという問題が発生する可能性があります送信またはファイルの選択によってアップロード機能がトリガーされません。解決策の詳細な説明は次のとおりです。

フォーム送信の問題への対処

元の JavaScript コードには、AJAX 呼び出し内の適切なエラーと成功の処理が欠けていました。これを修正するには、次のコードを追加します。

success:function(data){
    console.log("success");
    console.log(data);
},
error: function(data){
    console.log("error");
    console.log(data);
}

これらの関数は、サーバーからの応答を検査し、潜在的なエラーやアップロードの成功を処理する方法を提供します。

トリガー アップロード オンファイルの選択

ファイルの選択直後にアップロード機能をトリガーするには、次のイベント リスナーをファイル入力に追加します。 element:

$("#ImageBrowse").on("change", function() {
    $("#imageUploadForm").submit();
});

このコードは、ファイル入力要素の値への変更をリッスンし、フォームを自動的に送信して、AJAX アップロードを開始します。

完全なコード スニペット

上記のソリューションを組み合わせると、最終的な JavaScript コードは次のようになります。これ:

$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});

以上がAJAX 画像アップロードの問題を解決する方法: フォームの送信とアップロードのトリガー?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。