web-dev-qa-db-ja.com

JavaScriptでFile（）オブジェクトの名前を変更する

ユーザーがファイルをアップロードする前にファイルの名前を変更できるようにしたいのですが。

Fileプロパティが既に設定されているJavascriptにnameオブジェクトがありますが、これを更新できるようにしたいと思います。現在、明白なmyFile.name = "new-name.txt"は、このプロパティが読み取り専用であることを示すエラーを返します。

JavaScript nameオブジェクトのFileプロパティを変更する最良の方法は何ですか？

javascriptfilerenamefile-rename
17
CBarr

名前が付いたinputタグを追加して、nameプロパティをユーザーから非表示にすることができます。サーバーでは、名前としてinputを使用し、デフォルト名は無視してください。

3
beautifulcoder

今 file.nameは読み取り専用のプロパティです。これは、ブラウザでFileオブジェクトの名前を変更するための最良の方法であることがわかりました。

const myNewFile = new File([myFile], 'new_name.png', {type: myFile.type});
29
PaulMest

これを試して：

var blob = file.slice(0, file.size, 'image/png'); 
var newFile = new File([blob], 'name.png', {type: 'image/png'});

注：これは画像タイプ用であり、実際に使用しているタイプでこのタイプを変更する必要があります。

10
Alexander Taborda

Alexander Tabordaの回答に応じて... Blob.slice（）の1番目と2番目のパラメーターは、新しいblobを形成する元のblobの開始バイトと終了バイトです。言うことによって：

var blob = file.slice(0,-1);

「ファイルの終わりにコピーする」（これが私があなたの目標だと思うものです）ではなく、「最後のバイトを除いてBLOB全体をコピーする」と言っています。

@carestadが言うように

var blob = file.slice(0, file.size);

その後、新しいFile（）オブジェクトを作成すると、新しい名前で正確なコピーが作成されます。

Pngでは、ファイルは最後のバイトがないと無効と見なされます。

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

2
Andrew Chart

使用できます

FileSystemEntry.moveTo(newParent[, newName][, successCallback][, errorCallback]);

ファイルまたはディレクトリの名前を変更します。

それはMDNからです： https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/moveTo

0
裴雨墨