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


How to instantiate a File object in JavaScript?

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

我尝试了new File()，但是收到一个"非法构造函数"错误。

是否可以创建File对象？

文件对象参考：https://developer.mozilla.org/en/DOM/File

相关讨论

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

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

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

  • 第三个参数如下：

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

它可以在FireFox，Chrome和Opera中运行，但不能在Safari或IE / Edge中运行。

相关讨论

现在可以了！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 +"Download" + file.name +"type:"+file.type+"last modified:"+ file.lastModifiedDate
}

fr.readAsText(file);

相关讨论

Update

BlobBuilder has been obsoleted see how you go using it, if you're using it for testing purposes.

Otherwise apply the below with migration strategies of going to Blob, such as the answers to this question.

改用Blob

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

1
2
3
4
interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};

The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

创建斑点

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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上，但由于无法长期暴露上传逻辑，因此无法成功上传。

相关讨论

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

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

相关讨论

想法...在DOM中已经存在的图像中，使用javaScript创建File对象(api)：

1
2
3
4
5
6
7
8
<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

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

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

不要那样做！ ...(但是我还是这么做了)

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

1
2
3
4
5
6
7
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

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

为什么我需要这样做？

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

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

我只需要对dropzone.js进行此操作，因为我想模拟文件上载并且可以在File对象上工作。