如何在 javascript 中从 input=File 更改文件名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21720390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change name of file in javascript from input=File
提问by michael
I need to change the filename (not the file, just the metadata of the name) when uploading to a sharepoint site.
上传到共享点站点时，我需要更改文件名（不是文件，只是名称的元数据）。
I figured that it would be easy enough to change the html attribute in javascript rather than playing with Sharepoint backend. So that when I upload a file it changes the name of the file (not the data)
我认为在 javascript 中更改 html 属性而不是使用 Sharepoint 后端会很容易。这样当我上传文件时，它会更改文件的名称（而不是数据）
something like this:
像这样：
function PreSaveAction(){
var file = document.GetElementById('fileupload1');
file.files[0].name='ChangedName.tmp'
return true;
}
Is this impossible due to the nature of the locked input='file' attributes?
由于锁定 input='file' 属性的性质，这是不可能的吗？
回答by Alexander Taborda
try this:
试试这个：
var element = document.GetElementById('fileupload1');
var file = element.files[0];
var blob = file.slice(0, file.size, 'image/png');
newFile = new File([blob], 'name.png', {type: 'image/png'});
note: this is for a image type, you have to change this type with type you're actually using.
注意：这是针对图像类型的，您必须使用实际使用的类型更改此类型。
回答by Terry
A simpler and more memory efficient approach - change the file's 'name' property to writeable:
一种更简单且内存效率更高的方法 - 将文件的“名称”属性更改为可写：
Object.defineProperty(fileToAmend, 'name', {
writable: true,
value: updatedFileName
});
Where fileToAmend is the File and updatedFileName is the new filename.
其中 fileToAmend 是文件，updatedFileName 是新文件名。
Method from Cannot assign to read only property 'name' of object '[object Object]'
回答by Glavin001
From reading https://developer.mozilla.org/en-US/docs/Web/API/File/File#Syntaxthe bitsparameter of the Fileconstructor can be an array of Blobobjects.
从阅读https://developer.mozilla.org/en-US/docs/Web/API/File/File#Syntaxbits来看，File构造函数的参数可以是一个Blob对象数组。
bitsAn Array of ArrayBuffer, ArrayBufferView, Blob, USVString objects, or a mix of any of such objects, that will be put inside the File. USVString objects are encoded as UTF-8.
bits一个由 ArrayBuffer、ArrayBufferView、Blob、USVString 对象组成的数组，或任何此类对象的组合，它们将被放入文件中。USVString 对象被编码为 UTF-8。
From reading https://developer.mozilla.org/en-US/docs/Web/API/File#Methodsit turns out the Fileinherits from Blob:
从阅读https://developer.mozilla.org/en-US/docs/Web/API/File#Methods可以看出File继承自Blob：
The File interface doesn't define any methods, but inherits methods from the Blob interface
File接口没有定义任何方法，而是继承了Blob接口的方法
Therefore, new File([originalFile])is valid.
因此，new File([originalFile])是有效的。
I came up with the following which works for me:
我想出了以下对我有用的方法：
function renameFile(originalFile, newName) {
return new File([originalFile], newName, {
type: originalFile.type,
lastModified: originalFile.lastModified,
});
}
