JavaScriptを使用してフォーム投稿をシミュレートするためのファイル入力値を取得

Question

単純なhttppostを使用してイメージをs3にアップロードするためのフォームポストを送信するjavascript関数があり、フォームは送信時に正常に機能しますが、私が値フィールドを使用しているので、ファイル入力が見つかりませんでした。私はファイル[0]でそれをつかみようとしていますが、それは空です。

httppostはファイル全体を送信しますか？ファイルの内容を読む必要はありますか？ファイルフィールド？これは動作していないようです。

普通の送信を使用するとページ全体が更新され、ユーザーがリダイレクトされるので、私はajaxを好むでしょう。私は、s3にファイルを送信し、ブラウザの更新せずにajaxを使ってs3からxml応答を傍受したい。

送信アクションが実行されるまでファイルの内容が読み込まれないため、フォームの送信時までファイルの内容が利用できないようになっています。これはどのようにJavaScriptからトリガーするのですか？私はjQueryを使用していないので、私はjavascriptからポスト変数としてファイルの内容を取得する方法を考え出しています。

Answer 1

することはできPOSTFileまたはfetch()コールでbodyのインスタンスのいずれかを設定する、またはサーバにPOSTmultipart/form-dataをFormDataオブジェクトへFileオブジェクトを追加してから直接Blobオブジェクト。

document.querySelector("input[type=file]") 
.onchange = e => { 
    if (e.target.files.length) 
    fetch("/path/to/server", { 
     method:"POST", 
     body:e.target.files[0] 
    }) 
    .then(response => console.log(response.ok)) 
    .catch(err => console.error(err)) 
    } 
}