Ajax イメージのアップロードを強化してエラーを処理し、ファイル選択時にトリガーするにはどうすればよいですか?

Ajax 画像アップロードの強化

画像をアップロードするためにフォームを Ajax に変換しようとしていると、いくつかの障害に遭遇しました。問題を詳しく調べて解決策を提供しましょう。

問題 1: 送信イベントがアクションをトリガーしない

Ajax コードには、成功ハンドラーやエラー ハンドラーなどの重要なコンポーネントが不足しています。これらのハンドラーを含めると、サーバーからのエラーや応答をキャプチャして分析できるようになります。

問題 2: ファイル選択ではなく、送信時に関数がトリガーされる

ファイル選択時の画像アップロード機能、ファイル入力時の「変更」イベントを利用できます。変更イベントをキャプチャすると、フォームの送信を待つのではなく、ファイルの選択時に関数をすぐに実行できるようになります。

強化された Ajax コード:

これは改善されたコードです。必要な変更を組み込んだ Ajax コード:

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

追加注:

サーバー側の問題を把握するために、PHP コードに適切なエラー処理が含まれていることを確認してください。

以上がAjax イメージのアップロードを強化してエラーを処理し、ファイル選択時にトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。