Há um File
objeto em JavaScript. Quero instanciar um para fins de teste.
Eu tentei new File()
, mas recebo um erro "Construtor ilegal".
É possível criar um File
objeto?
Referência de objeto do arquivo: https://developer.mozilla.org/en/DOM/File
Há um File
objeto em JavaScript. Quero instanciar um para fins de teste.
Eu tentei new File()
, mas recebo um erro "Construtor ilegal".
É possível criar um File
objeto?
Referência de objeto do arquivo: https://developer.mozilla.org/en/DOM/File
Respostas:
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 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.
file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
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);
new File([], '')
Illegal constructor
no Chrome 37 / Ubuntu
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 .
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.
Usar o BlobBuilder como este em um método JavaScript existente que leva um arquivo para carregar via XMLHttpRequest
e 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);
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.
DataTransferItemList.add
File
não requer Blob
. Então, para a pergunta original: Como instanciar o arquivo ?
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",
});
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
Illegal constructor
no Chrome 37 / Ubuntu, portanto, não, ele não funciona.