Ajax イメージアップロードの送信イベントと変更イベントを処理するにはどうすればよいですか?-PHPチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-15 19:34:17

オリジナル

212 人が閲覧しました

How to Handle Submit and Change Events for Ajax Image Uploads?

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