ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery での非同期 AJAX ファイル アップロードに FormData を使用するにはどうすればよいですか?

jQuery での非同期 AJAX ファイル アップロードに FormData を使用するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-12 21:42:14
オリジナル
500 人が閲覧しました

How Can I Use FormData for Asynchronous AJAX File Uploads with jQuery?

非同期 AJAX ファイル アップロードに FormData を使用する

AJAX ファイル アップロードに FormData を利用するには、次の重要な手順を実行します。

準備

jQuery の最初のフォーム要素を利用して、処理のために FormData() にフィードします。

var form = $('form')[0]; // Use standard JavaScript object
var formData = new FormData(form);
ログイン後にコピー

または、特定のデータを選択します。 FormData():

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
formData.append('image', $('input[type=file]')[0].files[0]); // Attach file
ログイン後にコピー

送信中フォーム

jQuery を使用して Ajax リクエストを作成します。

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // Essential, do not omit (from jQuery 1.6+)
    processData: false, // Essential, do not omit
    // ... Other options like success, etc.
});
ログイン後にコピー

このリクエストは、「multipart/form-data」エンコーディングを使用した通常のフォームと同様にデータを送信します。

注:

  • 「次のように入力してください」ファイル送信には POST リクエストが必要なため、「POST」は必須です。
  • 「contentType: false」は jQuery 1.6 以降でのみ使用できます。

以上がjQuery での非同期 AJAX ファイル アップロードに FormData を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート