Come creare un'istanza di un oggetto File in JavaScript?

C'è un Fileoggetto in JavaScript. Voglio istanziarne uno a scopo di test.

Ho provato new File(), ma ricevo un errore "Costruttore illegale".

È possibile creare un Fileoggetto?

Riferimento all'oggetto file: https://developer.mozilla.org/en/DOM/File

Secondo la specifica dell'API del file W3C, il costruttore del 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 file;

• Il terzo argomento appare come:

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

Aggiornare

BlobBuilder è stato obsoleto per vedere come lo usi, se lo usi a scopo di test.

Altrimenti applica il seguito con le strategie di migrazione di andare a Blob , come le risposte a questa domanda .

Utilizzare invece un BLOB

In alternativa esiste un BLOB che è possibile utilizzare al posto di File poiché è ciò da cui l'interfaccia File deriva dalle specifiche W3C :

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

L'interfaccia File si basa su BLOB, ereditando la funzionalità BLOB e espandendola per supportare i file sul sistema dell'utente.

Crea il BLOB

L'uso di BlobBuilder in questo modo su un metodo JavaScript esistente che richiede il caricamento di un file XMLHttpRequeste la fornitura di 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 dell'esempio è su jsFiddle in un modo più completo, ma non verrà caricato correttamente poiché non riesco a esporre la logica di caricamento a lungo termine.

Ora è possibile 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 oggetto File (api) in javaScript per immagini già presenti nel 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);

Non farlo! ... (ma l'ho fatto comunque)

-> la console fornisce un risultato simile a un file oggetto:

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'oggetto è sbagliata ...

Perché devo farlo?

Ad esempio per ritrasmettere un modulo immagine già caricato, durante un aggiornamento del prodotto, insieme a immagini aggiuntive aggiunte durante l'aggiornamento

Poiché questo è JavaScript e dinamico, è possibile definire la propria classe che corrisponde all'interfaccia File e utilizzarla invece.

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