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


Answers:


204

根据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。


2
产生Illegal constructor在Chrome 37 / Ubuntu的所以没有它不工作
塞巴斯蒂安·洛伯

2
在Firefox 28 +,Chrome 38+和Opera 25+中确实可以使用。但是,Safari和IE至今仍未实现此构造函数(请参见caniuse.com/#feat=fileapi)。我目前正在寻找一种polyfill或一种模拟此方法的方法,但到目前为止没有找到任何合适的解决方案。
Pierre-Adrien Buisson

@ PA.Buisson我不知道这是否适用于所有的情况下(这是足以让我),但你可以使用BLOB()构造函数来代替,如建议在这里
raymondboswel

2
Windows Edge的替代方案是什么?
拉维·米什拉

3
对于IE11,可以使用Blob类构造File对象。这对我来说似乎是最便携式的解决方案。 file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
杰西·霍根

30

现在你可以!

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


不,它在Chrome中不起作用。请参阅code.google.com/p/chromium/issues/detail?id=164933。验证了它在Chrome 36 OSX中不起作用。
Ray Nicholus 2014年

那么我将在运行时验证它在DOSE中能在Chrome 35 OSX中正常工作new File([], '')
无止境

刚刚测试,它在35中也不起作用。请调整您的答案以反映该事实仅在Firefox中有效。
Ray Nicholus 2014年

嗯,你是对的。它仅对我有用,
无休止

Illegal constructor在Chrome 37 / Ubuntu上生成
Sebastien Lorber

19

更新资料

如果您将BlobBuilder 用于测试目的,则已经废弃了如何使用它。

否则,将以下内容应用于迁移策略 Blob的,例如该问题的答案。

改用Blob

作为替代方案,您可以使用Blob代替File,因为它是File接口根据 W3C规范

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

File接口基于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上,但由于无法长期暴露上传逻辑,因此无法成功上传。


11
该评论已过期。不要使用BlobBuilder,请使用Blob构造函数。Blob(['mythingy'],{type:“ thingy”})
odinho-Velmont 2012年

此代码无法运行。TypeError:BlobBuilder不是构造函数
指针为null

2
不幸的是,BlobBuilder已过时:developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD。

DataTransferItemList.add需要FileBlob。所以对于原始问题:如何实例化File
托马什Zato -恢复莫妮卡

1

现在,所有主要的浏览器都可以支持它:https : //developer.mozilla.org/zh-CN/docs/Web/API/File/File

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

4
这么说让我很痛苦,Edge是一个主要的浏览器。
li x

我没有看到很多人实际使用它。caniuse.com/#feat=fileapi-IE 2.6%,Edge-1.4%,Opera Mini-2.7%。在netmarketshare.com/browser-market-share.aspx上为4.3%。如果你关心边缘则需要找到一些解决办法developer.microsoft.com/en-us/microsoft-edge/platform/issues/...
帕维尔Evstigneev

Evestigneev您误解了结果,因为受支持的浏览器在全球范围内的使用率约为0.2%。这个数字是有多少浏览器正在使用api,而edge / IE本身约占仍在使用的浏览器的15%。
li x

0

这个想法...要在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

但是对象的大小是错误的...

为什么我需要这样做?

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


-5

因为这是JavaScript且是动态的,所以您可以定义自己的与File接口匹配的类,并改用它。

我只需要使用dropzone.js进行此操作,因为我想模拟文件上传并且它可以在File对象上运行。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.