Como instanciar um object File em JavaScript?

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

Eu tentei new File() , mas recebo um erro “Construtor ilegal”.

É possível criar um object File ?


Referência de object de arquivo: https://developer.mozilla.org/en/DOM/File

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

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

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 + "
Download " + file.name + "
type: "+file.type+"
last modified: "+ file.lastModifiedDate } fr.readAsText(file);

Atualizar

O BlobBuilder ficou obsoleto, veja como você vai usá-lo, se você estiver usando-o para fins de teste.

Caso contrário, aplique o abaixo com estratégias de migration para ir ao Blob , como as respostas a essa pergunta .

Use um Blob em vez disso

Como alternativa, há um Blob que você pode usar no lugar de File, como é o que a interface File deriva de acordo com as especificações do W3C :

 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 este 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á no 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.

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", }); 

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

  var file = new File(['fijRKjhudDjiokDhg1524164151'], 'https://stackoverflow.com/questions/8390855/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 object:

 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 object está errado …

Por que eu preciso fazer isso?

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

Como isso é javascript e dynamic, você pode definir sua própria class que corresponda à interface do arquivo e usá-la.

Eu tive que fazer exatamente isso com o dropzone.js porque eu queria simular o upload de um arquivo e ele funciona nos objects File.