Como instanciar um objeto File em JavaScript?

Respostas:

204

De acordo com a especificação da API do arquivo W3C, 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 são os dados fornecidos como uma matriz de linhas de texto;
  • O segundo argumento é o nome do arquivo;
  • O terceiro argumento se parece com:

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

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

AlainD
fonte
2
Produz Illegal constructorno Chrome 37 / Ubuntu, portanto, não, ele não funciona.
Sebastien Lorber
2
Isso funciona no Firefox 28+, Chrome 38+ e Opera 25+ . No entanto, o Safari e o IE ainda não implementam esse construtor hoje (consulte caniuse.com/#feat=fileapi ). Atualmente, estou procurando um polyfill ou uma maneira de emular isso, mas não encontrei nenhuma solução adequada até o momento.
Pierre-Adrien Buisson
@ PA.Buisson Eu não tenho certeza se isso vale para todos os casos (que era suficiente para mim), mas você pode usar o Blob () construtor em vez disso, como sugerido aqui
raymondboswel
2
Qual é a alternativa disso para o Windows Edge?
Ravi Mishra
3
Para o IE11, você pode usar a classe Blob para construir um objeto File. Esta parece ser a solução mais portátil para mim. file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
Jesse Hogan
30

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

Sem fim
fonte
Não, não funciona no Chrome. Consulte code.google.com/p/chromium/issues/detail?id=164933 . Verificou que não funciona no Chrome 36 OSX.
Ray Nicholus
então eu vou Verifique se ele DOSE trabalho no Chrome 35 OSX quando você executanew File([], '')
Sem Fim
Apenas testado, também não funciona em 35. Ajuste sua resposta para refletir o fato de que isso só funciona no Firefox.
Raio Nicholus
hmm, você está certo. ele fez único trabalho para mim desde que eu tinha ativado uma bandeira cromo experimental ... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif
Sem Fim
Produz Illegal constructorno Chrome 37 / Ubuntu
Sebastien Lorber
19

Atualizar

O BlobBuilder está obsoleto. Veja como você o usa, se você estiver usando para fins de teste.

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

Use um Blob

Como alternativa, existe um Blob que você pode usar no lugar do File , pois é o que a interface do File deriva conforme a especificação do W3C :

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

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

Crie o Blob

Usar o BlobBuilder como este em um método JavaScript existente que leva um arquivo para carregar via XMLHttpRequeste fornece um Blob para ele funciona bem da seguinte maneira:

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 maneira mais completa, mas não será carregado com êxito, pois não posso expor a lógica de upload a longo prazo.

Nick Josevski
fonte
11
Este comentário está desatualizado. Não use o BlobBuilder, use o construtor Blob. Blob (['mythingy'], {type: "thingy"})
odinho - Velmont
Este código não é executado. TypeError: BlobBuilder não é um construtor
Pointer Null
2
Infelizmente, o BlobBuilder está obsoleto: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD.
DataTransferItemList.addFilenão requer Blob. Então, para a pergunta original: Como instanciar o arquivo ?
Tomáš Zato - Restabelece Monica
1

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

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
Pavel Evstigneev
fonte
4
Por mais que me doa dizer isso, o edge é um dos principais navegadores.
li x
Na verdade, não vi muita gente usando. caniuse.com/#feat=fileapi - IE 2,6%, Edge - 1,4%, Opera Mini - 2,7%. No netmarketshare.com/browser-market-share.aspx é de 4,3%. Se você se preocupa com o Edge, precisa encontrar alguma solução alternativa developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
Pavel Evstigneev
Evestigneev você interpretou mal os resultados, pois os navegadores suportados têm um uso global de cerca de 0,2%. Esta figura é quantos navegadores estão usando a API, enquanto o próprio Edge / IE compõe cerca de 15% dos navegadores ainda em uso.
li x
0

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 assim mesmo)

-> o console fornece um resultado semelhante ao de 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, juntamente com imagens adicionais adicionadas durante a atualização

SNS - Web et Informatique
fonte
-5

Como isso é javascript e dinâmico, você pode definir sua própria classe que corresponda à interface File e usá-la.

Eu tive que fazer exatamente isso com o dropzone.js, porque queria simular um upload de arquivo e ele funciona em objetos de arquivo.

Ian1971
fonte