Wie instanziiere ich ein Dateiobjekt in JavaScript?

Antworten:

203

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.

AlainD
quelle
2
Produziert Illegal constructorauf Chrome 37 / Ubuntu, also nein, es funktioniert nicht
Sebastien Lorber
2
Dies funktioniert in Firefox 28+, Chrome 38+ und Opera 25 +. Safari und IE implementieren diesen Konstruktor jedoch noch heute nicht (siehe caniuse.com/#feat=fileapi ). Ich suche derzeit nach einer Polyfüllung oder einer Möglichkeit, dies zu emulieren, habe aber bisher keine geeignete Lösung gefunden.
Pierre-Adrien Buisson
@ PA.Buisson Ich bin nicht sicher, ob dies für alle Fälle gilt (es war für mich ausreichend), aber Sie können stattdessen den Blob ()
-Konstruktor
2
Was ist eine Alternative für Windows Edge?
Ravi Mishra
3
Für IE11 können Sie die Blob-Klasse verwenden, um ein Dateiobjekt zu erstellen. Dies scheint mir die tragbarste Lösung zu sein. file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
Jesse Hogan
30

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

Endlos
quelle
Nein, in Chrome funktioniert es nicht. Siehe code.google.com/p/chromium/issues/detail?id=164933 . Es wurde überprüft, dass es in Chrome 36 OSX nicht funktioniert.
Ray Nicholus
dann werde ich überprüfen, ob es DOSE in Chrome 35 OSX funktioniert, wenn Sie ausführennew File([], '')
Endless
Gerade getestet, funktioniert es auch in 35 nicht. Bitte passen Sie Ihre Antwort an die Tatsache an, dass dies nur in Firefox funktioniert.
Ray Nicholus
hmm, du hast recht. es funktionierte nur für mich, da ich eine experimentelle Chromflagge
Endless
Produziert Illegal constructorauf Chrome 37 / Ubuntu
Sebastien Lorber
19

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.

Nick Josevski
quelle
11
Dieser Kommentar ist veraltet. Verwenden Sie nicht BlobBuilder, sondern den Blob-Konstruktor. Blob (['mythingy'], {type: "thingy"})
odinho - Velmont
Dieser Code wird nicht ausgeführt. TypeError: BlobBuilder ist kein Konstruktor
Zeiger Null
2
Leider ist BlobBuilder veraltet: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD.
DataTransferItemList.adderfordert Filenicht Blob. Also zur ursprünglichen Frage: Wie instanziiere ich eine Datei ?
Tomáš Zato - Wiedereinsetzung Monica
1

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",
});
Pavel Evstigneev
quelle
4
So sehr es mich auch schmerzt, dies zu sagen, Edge ist ein wichtiger Browser.
li x
Ich habe nicht viele Leute gesehen, die es benutzt haben. caniuse.com/#feat=fileapi - IE 2,6%, Edge - 1,4%, Opera Mini - 2,7%. Auf netmarketshare.com/browser-market-share.aspx beträgt 4,3%. Wenn Sie sich für Edge interessieren, müssen Sie eine Problemumgehung finden. Developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
Pavel Evstigneev
Evestigneev Sie haben die Ergebnisse falsch interpretiert, da die unterstützten Browser eine weltweite Nutzung von rund 0,2% haben. Diese Zahl gibt an, wie viele Browser die API verwenden, während Edge / IE selbst etwa 15% der noch verwendeten Browser ausmacht.
li x
0

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

SNS - Web et Informatique
quelle
-5

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.

Ian1971
quelle