如何用 JavaScript 实例化 File 对象？

在 JavaScript 中有一个 File对象，我想实例化一个对象以便进行测试。

我已经尝试了 new File()，但是我得到一个“非法构造函数”错误。

是否可以创建一个 File对象？

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

372114 次浏览
小开

更新

BlobBuilder 已经是 过时了了，看看你是如何使用它的，如果你是为了测试的目的使用它。

否则，应用下面的迁移策略到 团团，如对 这个问题的回答。

用肉团代替

作为一个替代方案，您可以使用 团团来代替 档案，因为它是文件接口根据 W3C 规范从中派生出来的:

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

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

创建团块

像这样在现有的 JavaScript 方法中使用 BlobBuilder，该方法接受 File 通过 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上以更完整的方式上传，但不会成功上传，因为我不能长期公开上传逻辑。

小开

因为这是 javascript 和 Dynamic，所以您可以定义自己的类来匹配 File 接口并使用它。

我不得不使用 drozone.js 来做这件事，因为我想模拟文件上传，而且它可以在 File 对象上工作。

小开

现在你可以了！

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);

小开
最佳答案

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

因此，要创建一个空文件，请执行以下操作:

var f = new File([""], "filename");
  • 第一个参数是以文本行数组的形式提供的数据;
  • 第二个参数是文件名;

  • 第三个论点看起来像是:

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

It works in FireFox, Chrome and Opera, but not in Safari or IE/Edge.

小开

现在它是可行的，并且得到了所有主流浏览器的支持: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

用 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

但是物体的大小是错误的。

我为什么要这么做？

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


提交答案