ti-enxame.com

Como instanciar um objeto File em JavaScript?

Existe um File object em JavaScript. Eu quero instanciar um para fins de teste.

Eu tentei new File(), mas recebi um erro "Construtor ilegal".

É possível criar um objeto File?


File Referência do objeto: https://developer.mozilla.org/en/DOM/File

117
julesbou

De acordo com a especificação W3C File API, o construtor File requer 2 (ou 3) parâmetros.

Então, para criar um arquivo vazio, faça:

var f = new File([""], "filename");
  • O primeiro argumento é os dados fornecidos como uma matriz de linhas de texto;
  • O segundo argumento é o nome do arquivo;
  • O terceiro argumento parece:

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

Ele funciona no FireFox, Chrome e Opera, mas não no Safari ou no IE/Edge.

155
AlainD

Agora você pode!

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

24
Endless

Atualizar

BlobBuilder foi obsoleto ver como você vai usá-lo, se você estiver usando para fins de teste.

Caso contrário, aplique o abaixo com estratégias de migração de ir para Blob, como as respostas para esta questão .

Use um Blob

Como alternativa, há um Blob que você pode usar no lugar de File como é o que a interface File deriva como por W3C spec :

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

A interface File é baseada no Blob, herdando a funcionalidade blob e expandindo-a para suportar arquivos no sistema do usuário.

Crie o Blob

Usando o BlobBuilder como isso em um método JavaScript existente que leva um arquivo para fazer upload via XMLHttpRequest e fornecendo um Blob para ele funciona bem assim:

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

Exemplo estendido

O restante da amostra está em jsFiddle de uma forma mais completa, mas não será bem-sucedida, já que não posso expor a lógica de upload a longo prazo.

18
Nick Josevski

Agora é possível e suportado por todos os principais navegadores: https://developer.mozilla.org/pt-BR/docs/Web/API/File/File

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

A idéia ... Para criar um objeto File (api) em javaScript para imagens já presentes no DOM:

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

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

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

Não faça isso! ... (mas eu fiz mesmo assim)

-> o console dá um resultado semelhante como um arquivo de objeto:

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

Mas o tamanho do objeto está errado ...

Por que eu preciso fazer isso?

Por exemplo, para retransmitir Um formulário de imagem já carregado, durante uma atualização do produto, junto com imagens adicionais adicionadas durante a atualização

0
SNS - Web et Informatique