浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】JavaScript を用いて任意の値を input[type=”file”] にファイルとしてセットする方法

<input type=”file”> – HTML: HyperText Markup Language | MDN

 input[type="file"]はファイルを選択する入力欄であり、ローカルのファイルを扱う都合上セキュリティが強いです。例えば JavaScript 上から選択されたファイルのローカルマシン中のパスを知ろうとするとC:\fakepath\ファイル名となります。またファイルが格納されているプロパティの型であるFileListクラスをインスタンスにしようとした場合Uncaught TypeError: Illegal constructorとエラーが起きます。このため value などの他プロパティの様にファイルを input 要素にセットしようとすると詰まりやすいです。これらは次の様にすることで回避できます。

// 文字列->Blob->File オブジェクトと加工
const csvStr = 'hoge,ふが,3列目';
const csvBlob = new Blob([csvStr], {type: 'text/plain'});
const csvFile = new File([csvBlob], 'ダミーファイル名.csv', {type: "text/plain"});
// File を DataTransfer に追加
// DataTransfer はドラッグ&ドロップ用のオブジェクト
// @see https://developer.mozilla.org/ja/docs/Web/API/DataTransfer
const dt = new DataTransfer();
// items.add で File を追加すると items に加えて files も増える
console.log(dt.items[0]);// undefined
console.log(dt.files[0]);// undefined
dt.items.add(csvFile);
console.log(dt.items[0]);// [object DataTransferItem]
console.log(dt.files[0]);// [object File]
// 自前 File の入った FileList である DataTransfer.files を代入してセット完了
document.querySelector('input#csvFile').files = dt.files;

 DataTransfer が実質的なセッターを持つ FileList となっているため上記デモの様に input[type=”file”] を好き勝手できます。もちろんブラウザを持つマシンのローカルファイルシステムの中を探ることはできませんが、フォームの中身を維持するために使うなど色々できます。

  • この記事いいね! (0)