AJAX 画像アップロードの問題を解決する方法: フォームの送信とアップロードのトリガー?-PHPチュートリアル-php.cn

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

DDD

リリース： 2024-12-18 05:17:14

オリジナル

962 人が閲覧しました

How to Fix AJAX Image Upload Issues: Form Submission and Triggering Upload?

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 サイトの他の関連記事を参照してください。