JavaScriptを使用してフォームなしでファイルをアップロードするにはどうすればよいですか?

場合によっては、開発者は JavaScript フォームを使用せずにファイルをアップロードする必要があります。通常、ユーザーからデータとファイルを取得するフォームを作成しますが、このチュートリアルでは、フォームを使用せずにユーザーからファイルを取得し、バックエンドに送信する方法を学習します。

FormData() オブジェクトと Ajax リクエストの使用

FormData オブジェクトを使用すると、フォーム データをキーと値のペアで保存できます。変数を初期化するにはコンストラクターを使用する必要があります。ユーザーが HTML 入力を使用してファイルをアップロードし、そのファイルをフォーム データに保存できるようにすることができます。その後、フォーム データをバックエンドに送信できます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って FormData() オブジェクトと ajax リクエストを使用して、フォームを使用せずにファイルをアップロードできます。

リーリー

上記の構文では、append() メソッドを使用してファイルをフォーム データ オブジェクトに追加します。さらに、ajax() を使用して API にデータを送信します。

＃＃＃例＃＃＃

以下の例では、

タグを使用して HTML で入力するファイルを作成しています。 JavaScript では、ユーザーがファイルをアップロードするたびに、ファイルにアクセスして form_data オブジェクトに追加します。

その後、ajax を使用して、POST リクエスト経由でファイルを API に送信します。

リーリー jQuery 簡易アップロード プラグインを使用する

jQuery には、ファイルを API に送信するために使用できる単純なアップロード プラグインが含まれています。シンプルアップロードプラグインを使用するには、その CDN を

セクションに追加する必要があります。開発者がアプリケーションを使用している場合は、NPM コマンドを使用してパッケージをインストールできます。

＃＃＃文法＃＃＃

ユーザーは、jQuery Simple Upload プラグインを使用して JavaScript を使用してフォームレス ファイルをアップロードするには、次の構文に従う必要があります。

リーリー

上記の構文では、シンプル アップロード プラグインの simpleUpload() 関数を呼び出してファイルをアップロードします。 ＃＃＃例＃＃＃

以下の例では、

セクションに simpleUpload.min.js ファイルへのパスを追加しました。ファイル入力に「change」イベントを追加しました。コールバック関数では、ファイル入力を参照として simpleUpload() 関数を呼び出します。このオブジェクトを、キーとコールバック関数を値として持つ simpleUpload() 関数の 2 番目のパラメーターとして渡します。

リーリー

ユーザーは、JavaScript のフォームを使用せずにファイルをアップロードする 2 つの異なる方法を学びました。最初のメソッドでは FormData オブジェクトと ajax() メソッドを使用しました。 2 番目の方法では、Jquery の単純なアップロード プラグインを使用しました。

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