JavaScriptで input type=”file” に値を設定するには？①
type=”file” は他の入力タイプと異なり、セキュリティが高いです。
なのでJavaScriptを使用し、valueプロパティでローカルのファイルパスをセットなどができないし、パスを取得することもできません。
できてしまったら、ローカルの重要ファイルを勝手にアップロードされてしまいます。
まったく、ファイルをセットできないのかというと、そんなことはありません。
新規ファイルオブジェクトを作成し、ファイルをセットすることが可能です。
新規ファイルテキストをinput type="file"にセット
<input type=”file” />
を用意し、以下のコードを実行します。
// ファイルエレメントを取得
const fileInput = document.querySelector('input[type="file"]');
// ファイルオブジェクトの作成
const myFile = new File(['Hello World!'], 'myFile.txt', {
type: 'text/plain',
lastModified: new Date(),
});
// データトランスファーを作成し、先程のファイルを追加
const dataTransfer = new DataTransfer();
dataTransfer.items.add(myFile);
// ファイルエレメントのfilesプロパティにデータトランスファーのfilesをセット
fileInput.files = dataTransfer.files;
次回は画像ファイルについて
