it-swarm.com.de

Wie man ein File-Objekt in JavaScript instanziiert?

Es gibt ein File object in JavaScript. Ich möchte einen zu Testzwecken instanziieren.

Ich habe new File() ausprobiert, erhalte aber den Fehler "Illegal constructor".

Kann ein File-Objekt erstellt werden?


File Objektreferenz: https://developer.mozilla.org/de/DOM/File

117
julesbou

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

So erstellen Sie eine leere Datei:

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 folgendermaßen aus:

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

Es funktioniert in Firefox, Chrome und Opera, aber nicht in Safari oder IE/Edge.

155
AlainD

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

24
Endless

Update

BlobBuilder wurde obsoleted sehen, wie Sie es verwenden, wenn Sie es zu Testzwecken verwenden.

Ansonsten gelten die unten stehenden Migrationsstrategien von Blob wie die Antworten auf diese Frage .

Verwenden Sie stattdessen einen Klecks

Als Alternative gibt es ein Blob , das Sie anstelle von File verwenden können, da es sich hierbei um das File-Interface handelt, das nach W3C spezifiziert 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 Benutzersystem zu unterstützen.

Erstellen Sie den Blob

Die Verwendung des BlobBuilder in einer vorhandenen JavaScript-Methode, die das Hochladen einer Datei über XMLHttpRequest erfordert, und die Bereitstellung eines Blobs, funktioniert 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 Samples ist vollständiger auf jsFiddle , wird aber nicht erfolgreich hochgeladen, da ich die Upload-Logik nicht auf lange Sicht freigeben kann.

18
Nick Josevski

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",
});
1

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 ähnliches Ergebnis wie eine 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 zur erneuten Übertragung von ein während eines Produktupdates bereits hochgeladenes Bildformular sowie weitere während des Updates hinzugefügte Bilder