web-dev-qa-db-ja.com

JavaScriptでFileオブジェクトの変更されたコピーを作成する方法は？

_<input type="file">_から受け取ったファイルのプロパティは読み取り専用です。

たとえば、次の_file.name_を書き換えようとすると、警告なしに失敗するか、_TypeError: Cannot assign to read only property 'name' of object '#<File>'_がスローされます。

_<input onchange="onchange" type="file">
_
_onchange = (event) => {
    const file = event.target.files[0];
    file.name = 'foo';
}
_

Object.assign({}, file)を介してコピーを作成しようとすると失敗します（空のオブジェクトが作成されます）。

では、どのようにFileオブジェクトを複製するのでしょうか？

javascriptfilecopyclone
14
jtheletter

私の解決策はFileコンストラクターにありました：

https://developer.mozilla.org/en-US/docs/Web/API/File#Implementation_notes

それ自体がBlobの拡張です。

https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob

_let file = event.target.files[0];
if (this.props.distro) {
    const name = 'new-name-here' + // Concat with file extension.
        file.name.substring(file.name.lastIndexOf('.'));
    // Instantiate copy of file, giving it new name.
    file = new File([file], name, { type: file.type });
}
_

File()の最初の引数は、単に元のファイルではなく配列でなければならないことに注意してください。

19
jtheletter

FormData.prototype.append()を使用して、BlobをFileオブジェクトに変換することもできます。

let file = event.target.files[0];
let data = new FormData();
data.append("file", file, file.name);
let _file = data.get("file");
5
guest271314

よりクロスブラウザーのソリューション

受け入れられた回答 は、最新のブラウザでも機能しますが、残念ながらIE11では機能しません IE11はFileコンストラクタをサポートしていない 。ただし、IE11はBlobコンストラクターをサポートしているため、代替として使用できます。

例えば：

var newFile  = new Blob([originalFile], {type: originalFile.type});
newFile.name = 'copy-of-'+originalFile.name;
newFile.lastModifiedDate = originalFile.lastModifiedDate;

出典： MSDN-HTML 5ファイルAPIを使用してファイルインスタンスを作成する方法

2
Boaz - Reinstate Monica