如何从 JavaScript 中的 File-API 对象中删除属性？

Question

我正在使用 JavaScript“文件”api 读取有关将要上传的图像的信息，以便在实际上传之前生成预览缩略图，基于此处找到的演示 (JavaScript file api)。

使用带有“多个”属性的文件输入，可以同时选择一个或多个文件，例如：<input type="file" id="imageFiles" name="userfile[]" multiple />

一旦用户选择了图像，我使用 firebug 检查元素，我可以在 DOM 中看到“文件”对象包含有关所选图像的信息。

“文件”对象将包含与选择的文件一样多的属性，并且每个属性都包含有关每个图像的信息。我只能将“文件”对象描述为关联数组，因为每个属性本身就是一个对象。

我想要做的是能够从“文件”对象中删除给定的属性，从而删除将上传的图像之一，而无需再次选择图像。

到目前为止，这是我尝试过的，但它不起作用：

var getAllFiles = document.getElementById('imageFiles');
var allImages = getAllFiles.files; // returns an object with X properties
delete allImages[X]; // "X" is whatever property key I'm passing in

我已经尝试过“splice()”方法，但它也不起作用。

非常感谢。

Answer 1

.files 是只读的，因此您无法修改它。您可以将文件本身提取到一个数组中，但是您不能使用正常的表单上传，您需要通过binary XHR上传它们

您可以使用以下方法将文件提取到普通数组中：

var files = [].slice.call( this.files );
files.splice( 1, 1 ); //whatever works for normal array

您也可以首先将accept="image/*" 放在输入中：

<input type="file" id="imageFiles" accept="image/*" name="userfile[]" multiple />

我认为您理解这些在 IE 或任何其他没有文件 API 的浏览器中将无法工作。