Ajax イメージアップロードの送信イベントと変更イベントを処理するにはどうすればよいですか?

Ajax アップロード: 送信と変更イベント処理

問題の概要:
既存のフォームを拡張して活用する画像アップロード用の Ajax では、提供されたコードが不完全であるようです。追加のコードが必要です。機能。

解決策:

1. Ajax を使用したフォーム送信の実装:

フォーム送信のイベント ハンドラーで、提供されたコードに重要な要素が欠落しています:

• 成功関数とエラー関数: Ajax では、からの応答を処理するために成功関数とエラー関数の両方が必要です。 server.
• フォーム データ: フォーム データを送信するには、formData = new FormData(this); を使用します。 Ajax 互換性のために contentType と processData を false に設定します。

修正コード:

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

2.ファイル選択時にアップロードをトリガーする:

ファイル選択時にアップロードを開始するには、ファイル入力で変更イベントを使用します:

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

これらの変更により、Ajax アップロード機能は期待通りに動作します。

以上がAjax イメージアップロードの送信イベントと変更イベントを処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。