JS フェッチ API を使用したファイル アップロードのマスター
JS フェッチ API の操作は、特にファイルのアップロードに取り組む場合、困難になることがあります。このプロセスを段階的に分けて簡略化してみましょう。
1.ファイル入力のキャプチャ
コードで示されているように、ファイル入力要素を使用してユーザーがファイルを選択できるようにします。
<form> <div> <label>Select file to upload</label> <input type="file"> </div> <button type="submit">Convert</button> </form>
2.送信イベントを処理します
送信イベントをキャッチします (プレースホルダーを希望のイベント ハンドラーに置き換えます):
document.querySelector('form').addEventListener('submit', (event) => { // Prevent default form submission event.preventDefault(); // Retrieve the selected file const input = event.target.querySelector('input[type="file"]'); // Construct the request body const formData = new FormData(); formData.append('file', input.files[0]); // Submit the request fetch('/files', { method: 'POST', body: formData }).then(/* perform necessary actions */); });
3.リクエスト本文を作成します
フェッチを使用してファイルを送信するには、FormData API を使用します。マルチパート/フォームデータのリクエスト本文を作成します。選択したファイル (input.files[0]) とユーザー情報などの追加データを formData オブジェクトに追加します:
const formData = new FormData(); formData.append('file', input.files[0]); formData.append('user', 'username');
4.フェッチ リクエストを開始します
リクエスト本文の準備ができたら、エンドポイント URL ('/files') を指定し、本文として formData オブジェクトを指定して、フェッチを使用して POST リクエストを送信します。
fetch('/files', { method: 'POST', body: formData }) .then(/* handle the response as desired */);
そして出来上がりです!これで、JS フェッチ API を使用した完全に機能するファイル アップロード メカニズムが完成しました。
以上がJavaScript Fetch API を使用してマスター ファイルをアップロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。