JavaScript でファイルをアップロードする方法（例付き）
この記事では、ファイルピッカーダイアログからファイルを選択し、fetch メソッドを使用して選択したファイルをサーバーにアップロードする方法について説明します。バックエンドサーバーストレージにファイルをアップロードするには、選択したファイルデータをフォームデータオブジェクトに追加する必要があります。
let formData = new FormData();
formData.append('file', fileupload.files[0]);
HTML で JavaScript を使用してファイルをアップロードする例
ファイルタイプの入力フォームを作成して、PC /システムストレージから任意の拡張子のファイルを選択します。関数 uploadFile() を呼び出すためのボタンがあります。この関数は、ファイルデータをフォームデータオブジェクトに追加し、fetch メソッドを使用してそのフォームデータをサーバーにアップロードするだけです。fetch メソッドは、フロントエンドからバックエンドにデータを取得またはアップロードするための API 呼び出しとして、ネットワークリクエストの JavaScript で使用されます。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | File upload example
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Choose your file and Click upload.</h2>
<!-- Input Form Elements HTML 5 -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload file </button>
<!-- File Upload Logic JavaScript -->
<script>
async function uploadFile() {
//creating form data object and append file into that form data
let formData = new FormData();
formData.append("file", fileupload.files[0]);
//network request using POST method of fetch
await fetch('PASTE_YOUR_URL_HERE', {
method: "POST",
body: formData
});
alert('You have successfully upload the file!');
}
</script>
</body>
<html>
上記の HTML ページのソースでは、choose file をクリックしてユーザーのローカルシステムストレージからファイルデータを取得するための file の単純な入力フォームタイプを確認できます。また、Upload file ボタンを使用して関数を宣言し、機能を続行します。
このフロントエンド Web ページでは、選択したファイルの拡張子が付いた名前も表示されます。
ここでは、doctype html で javaScript ステートメントを使用するために必要な <script> タグを確認できます。これらのタグでは、uploadFile() を宣言しています。
この関数にはフォームデータオブジェクトが含まれており、ファイルはそのフォームデータオブジェクトに追加され、fetch POST メソッドを使用してネットワークリクエストを呼び出します。ファイルデータは、ネットワークリクエストの形式で送信されます。
次のステップで、function() はユーザーにアラートボックスを表示します You have successfully upload the file!ファイルが正常にアップロードされた場合。
JavaScript を使用してファイルをアップロード/選択する別の方法
以下に示すのと同じ結果を達成することもできます。document.createElement() メソッドを使用して、type="file"で <input> 要素を作成できます。
getElementById() メソッドを使用すると、type="file"で <input> 要素に簡単にアクセスできます。
var data = document.getElementById('my_file');
<button onclick="myFunction()">Choose file</button>
<script>
function myTestFunction() {
var data = document.createElement("INPUT");
data.setAttribute("type", "file");
document.body.appendChild(data);
}
</script>
上記の例では、document.createElement("INPUT"); が割り当てられた var data 関数、ファイルタイプでデータの属性を設定する必要があります
次のステップでは、document.body のデータを使用して appendChild する必要があります。