Ajax 画像アップロードの問題を解決する方法: フォーム送信の失敗とファイル選択の問題?

Ajax 画像アップロード

この記事では、画像アップロード用の標準 HTML フォームの Ajax 実装への変換に関する質問に対処します。ユーザーは、フォーム送信時の機能の欠如と、アップロード プロセスをトリガーするファイル選択がないという 2 つの具体的な課題に直面しました。

問題: Ajax フォームの送信が失敗し、ファイル選択によってアップロードが開始されません。

解決策:

1. Ajax の成功およびエラー処理が欠落しています: 初期コードには Ajax の成功およびエラー処理関数がありませんでした。電話。これらの関数を含めることで、開発者は Ajax 呼び出しが成功したかどうか、またはエラーが発生したかどうかを判断できます。
2. ファイル選択時のアップロードのアクティブ化: ファイルの選択後すぐにアップロード プロセスを開始するには、ファイル入力フィールド (#ImageBrowse) の変更イベントを利用できます。ユーザーがファイルを選択すると、このイベントがトリガーされ、フォームが送信され、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();
    });
});

追加注:

• ファイルのアップロードを適切に処理するには、フォームの enctype 属性が multipart/form-data に設定されていることを確認してください。
• FormData オブジェクトは、選択したファイルを含む、送信用のフォーム データ。
• contentType と processData は、jQuery がフォームに干渉しないように false に設定されます。データ。

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