Come creare un’istanza di un object File in JavaScript?

C’è un object File in JavaScript. Voglio istanziare uno per scopi di test.

Ho provato il new File() , ma ottengo un errore “Illegal constructor”.

È ansible creare un object File ?


Oggetto di riferimento del file: https://developer.mozilla.org/en/DOM/File

In base alle specifiche dell’API del file W3C, il costruttore File richiede 2 (o 3) parametri.

Quindi per creare un file vuoto fai:

 var f = new File([""], "filename"); 
  • Il primo argomento sono i dati forniti come una matrice di righe di testo;
  • Il secondo argomento è il nome del file;
  • Il terzo argomento sembra:

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

Funziona in FireFox, Chrome e Opera, ma non in Safari o IE / Edge.

Ora puoi!

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

Aggiornare

BlobBuilder è stato reso obsoleto, vedi come lo usi, se lo stai usando a scopo di test.

In caso contrario, applica le seguenti strategie di migrazione per andare su Blob , ad esempio le risposte a questa domanda .

Utilizzare invece un BLOB

In alternativa c’è un Blob che puoi usare al posto di File in quanto è l’interfaccia File che deriva dalle specifiche W3C :

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

L’interfaccia File è basata su Blob, che eredita la funzionalità blob e la espande per supportare i file sul sistema dell’utente.

Crea il Blob

L’utilizzo di BlobBuilder come questo su un metodo JavaScript esistente che richiede un file per caricare tramite XMLHttpRequest e fornire un Blob funziona in questo modo:

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

Esempio esteso

Il resto del campione è su jsFiddle in un modo più completo, ma non verrà caricato correttamente poiché non posso esporre la logica di caricamento a lungo termine.

Ora è ansible e supportato da tutti i principali browser: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

L’idea … Per creare un object File (api) in javaScript per le immagini già presenti nel DOM:

  var file = new File(['fijRKjhudDjiokDhg1524164151'], 'https://stackoverflow.com/questions/8390855/img/Products/fijRKjhudDjiokDhg1524164151.jpg', {type:'image/jpg'}); // created object file console.log(file); 

Non farlo! … (ma l’ho fatto comunque)

-> la console fornisce un risultato simile a un file 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 

Ma la dimensione dell’object è sbagliata …

Perché ho bisogno di farlo?

Ad esempio per ritrasmettere un modulo immagine già caricato, durante un aggiornamento del prodotto, insieme ad altre immagini aggiunte durante l’aggiornamento

Poiché questo è javascript e dinamico, puoi definire la tua class che corrisponde all’interfaccia File e usarla al suo posto.

Ho dovuto fare proprio questo con dropzone.js perché volevo simulare un caricamento di file e funziona su oggetti File.