<input type=”file”> – HTML： HyperText Markup Language ｜ MDN
input[type="file"]はファイルを選択する入力欄であり、ローカルのファイルを扱う都合上セキュリティが強いです。例えば JavaScript 上から選択されたファイルのローカルマシン中のパスを知ろうとするとC:\fakepath\ファイル名となります。またファイルが格納されているプロパティの型であるFileListクラスをインスタンスにしようとした場合Uncaught TypeError: Illegal constructorとエラーが起きます。このため value などの他プロパティの様にファイルを input 要素にセットしようとすると詰まりやすいです。これらは次の様にすることで回避できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 文字列->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 はドラッグ&ドロップ用のオブジェクトconst dt = new DataTransfer();// items.add で File を追加すると items に加えて files も増えるconsole.log(dt.items[0]);// undefinedconsole.log(dt.files[0]);// undefineddt.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”] を好き勝手できます。もちろんブラウザを持つマシンのローカルファイルシステムの中を探ることはできませんが、フォームの中身を維持するために使うなど色々できます。
