如何在 JavaScript 中实例化 File 对象？

Question

在 JavaScript 中有一个 File 对象。我想实例化一个用于测试目的。

我已尝试new File()，但我收到“非法构造函数”错误。

是否可以创建File 对象？

---

文件对象引用：https://developer.mozilla.org/en/DOM/File

Answer 1

想法...在 javaScript 中为 DOM 中已经存在的图像创建一个 File 对象 (api)：

<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

var file = new File(['fijRKjhudDjiokDhg1524164151'],
                     '../img/Products/fijRKjhudDjiokDhg1524164151.jpg', 
                     {type:'image/jpg'});

// created object file
console.log(file);

不要那样做！ ...（但我还是这样做了）

-> 控制台给出类似于对象文件的结果：

File(0) {name: "fijRKjokDhgfsKtG1527053050.jpg", lastModified: 1527053530715, lastModifiedDate: Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)), webkitRelativePath: "", size: 0, …}
lastModified:1527053530715
lastModifiedDate:Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)) {}
name:"fijRKjokDhgfsKtG1527053050.jpg"
size:0
type:"image/jpg"
webkitRelativePath:""__proto__:File

但是物体的大小不对……

为什么我需要这样做？

例如重传 在产品更新期间已上传的图片表单，以及在更新期间添加的其他图片

Answer 2

现在所有主流浏览器都支持并支持它：https://developer.mozilla.org/en-US/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

Answer 3

根据 W3C File API 规范，File 构造函数需要 2（或 3）个参数。

所以要创建一个空文件：

var f = new File([""], "filename");

• 第一个参数是作为文本行数组提供的数据；
• 第二个参数是文件名；

• 第三个参数看起来像：

  var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})
  

它适用于 FireFox、Chrome 和 Opera，但不适用于 Safari 或 IE/Edge。

Answer 4

现在你可以了！

var parts = [
  new Blob(['you construct a file...'], {type: 'text/plain'}),
  ' Same way as you do with blob',
  new Uint16Array([33])
];

// Construct a file
var file = new File(parts, 'sample.txt', {
    lastModified: new Date(0), // optional - default = now
    type: "overide/mimetype" // optional - default = ''
});

var fr = new FileReader();

fr.onload = function(evt){
   document.body.innerHTML = evt.target.result + "<br><a href="+URL.createObjectURL(file)+" download=" + file.name + ">Download " + file.name + "</a><br>type: "+file.type+"<br>last modified: "+ file.lastModifiedDate
}

fr.readAsText(file);

Answer 5

更新

BlobBuilder 已经obsoleted 看看你如何使用它，如果你将它用于测试目的。

否则将以下内容与转到Blob的迁移策略一起应用，例如this question的答案。

改用 Blob

作为替代方案，您可以使用Blob 代替File，因为它是根据W3C spec 派生的文件接口：

interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};

File 接口基于 Blob，继承了 blob 功能并将其扩展为支持用户系统上的文件。

创建 Blob

像这样在现有的 JavaScript 方法上使用 BlobBuilder，该方法需要通过 XMLHttpRequest 上传文件并向其提供 Blob，如下所示：

var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder;
var bb = new BlobBuilder();

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jsfiddle.net/img/logo.png', true);

xhr.responseType = 'arraybuffer';

bb.append(this.response); // Note: not xhr.responseText

//at this point you have the equivalent of: new File()
var blob = bb.getBlob('image/png');

/* more setup code */
xhr.send(blob);

扩展示例

示例的其余部分以更完整的方式在 jsFiddle 上发布，但由于我无法长期公开上传逻辑，因此无法成功上传。

Answer 6

因为这是 javascript 和动态的，您可以定义自己的与 File 接口匹配的类并改用它。

我不得不用 dropzone.js 来做这件事，因为我想模拟文件上传并且它适用于 File 对象。