Wie instanziiere ich ein Dateiobjekt in JavaScript?

Es gibt ein FileObjekt in JavaScript. Ich möchte eine zu Testzwecken instanziieren.

Ich habe es versucht new File(), aber ich erhalte den Fehler "Illegaler Konstruktor".

Ist es möglich, eine zu erstellen File Objekt ?

Referenz des Dateiobjekts : https://developer.mozilla.org/en/DOM/File

Gemäß der W3C-Datei-API-Spezifikation benötigt der Dateikonstruktor 2 (oder 3) Parameter.

Um eine leere Datei zu erstellen, gehen Sie wie folgt vor:

var f = new File([""], "filename");

• Das erste Argument sind die Daten, die als Array von Textzeilen bereitgestellt werden.
• Das zweite Argument ist der Dateiname;

• Das dritte Argument sieht aus wie:

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

Es funktioniert in FireFox, Chrome und Opera, jedoch nicht in Safari oder IE / Edge.

Jetzt kannst du!

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

Aktualisieren

BlobBuilder ist veraltet. Sehen Sie, wie Sie es verwenden, wenn Sie es zu Testzwecken verwenden.

Andernfalls wenden Sie das Folgende mit Migrationsstrategien an, um zu Blob zu gelangen , z. B. die Antworten auf diese Frage .

Verwenden Sie stattdessen einen Blob

Alternativ gibt es einen Blob , den Sie anstelle von File verwenden können, da er von der File-Schnittstelle gemäß der W3C-Spezifikation abgeleitet ist :

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

Die Dateischnittstelle basiert auf Blob, erbt die Blob-Funktionalität und erweitert sie, um Dateien auf dem System des Benutzers zu unterstützen.

Erstellen Sie den Blob

Wenn Sie den BlobBuilder wie folgt für eine vorhandene JavaScript-Methode verwenden, bei der eine Datei zum Hochladen benötigt XMLHttpRequestund ein Blob bereitgestellt wird, funktioniert dies wie folgt :

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

Erweitertes Beispiel

Der Rest des Beispiels ist vollständiger auf jsFiddle verfügbar , wird jedoch nicht erfolgreich hochgeladen, da ich die Upload-Logik nicht langfristig verfügbar machen kann.

Jetzt ist es möglich und wird von allen gängigen Browsern unterstützt: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

Die Idee ... So erstellen Sie ein Dateiobjekt (API) in JavaScript für Bilder, die bereits im DOM vorhanden sind:

<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

var file = new File(['fijRKjhudDjiokDhg1524164151'],
                     '../img/Products/fijRKjhudDjiokDhg1524164151.jpg', 
                     {type:'image/jpg'});

// created object file
console.log(file);

Tu das nicht! ... (aber ich habe es trotzdem getan)

-> Die Konsole liefert ein Ergebnis ähnlich einer Objektdatei:

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

Aber die Größe des Objekts ist falsch ...

Warum muss ich das tun?

Zum Beispiel, um ein Bildformular, das bereits während eines Produktupdates hochgeladen wurde, zusammen mit zusätzlichen Bildern, die während des Updates hinzugefügt wurden, erneut zu übertragen

Da dies Javascript und dynamisch ist, können Sie Ihre eigene Klasse definieren, die der Dateischnittstelle entspricht, und diese stattdessen verwenden.

Ich musste genau das mit dropzone.js tun, weil ich einen Datei-Upload simulieren wollte und er für Dateiobjekte funktioniert.