Jak utworzyć instancję obiektu File w JavaScript?

W FileJavaScript jest obiekt. Chcę utworzyć instancję do celów testowych.

Próbowałem new File(), ale pojawia się błąd „Niedozwolony konstruktor”.

Czy można stworzyć Fileobiekt?

Odniesienie do obiektu pliku: https://developer.mozilla.org/en/DOM/File

Zgodnie ze specyfikacją W3C File API, konstruktor File wymaga 2 (lub 3) parametrów.

Aby utworzyć pusty plik, wykonaj:

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

• Pierwszy argument to dane dostarczone jako tablica wierszy tekstu;
• Drugim argumentem jest nazwa pliku;

• Trzeci argument wygląda następująco:

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

Działa w FireFox, Chrome i Opera, ale nie w Safari ani IE / Edge.

Teraz możesz!

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

Aktualizacja

BlobBuilder został przestarzały, zobacz, jak go używasz, jeśli używasz go do celów testowych.

W przeciwnym razie zastosuj poniższe strategie migracji do Bloba , takie jak odpowiedzi na to pytanie .

Zamiast tego użyj obiektu Blob

Alternatywnie istnieje Blob , którego można użyć zamiast File, ponieważ jest to interfejs pliku, zgodnie ze specyfikacją W3C :

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

Interfejs File jest oparty na obiekcie Blob, dziedzicząc funkcjonalność obiektu BLOB i rozszerzając go w celu obsługi plików w systemie użytkownika.

Utwórz obiekt Blob

Użycie BlobBuilder w ten sposób w istniejącej metodzie JavaScript, która pobiera plik do przesłania za pośrednictwem XMLHttpRequesti dostarczenie do niego obiektu Blob, działa dobrze w następujący sposób:

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

Rozszerzony przykład

Pozostała część próbki znajduje się na jsFiddle w bardziej kompletny sposób, ale nie zostanie pomyślnie przesłana, ponieważ nie mogę ujawnić logiki przesyłania na dłuższą metę.

Teraz jest to możliwe i obsługiwane przez wszystkie główne przeglądarki: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

Pomysł ... Aby utworzyć obiekt File (api) w javaScript dla obrazów już obecnych w 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);

Nie rób tego! ... (ale i tak to zrobiłem)

-> konsola daje wynik podobny do pliku obiektu:

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

Ale rozmiar obiektu jest zły ...

Dlaczego muszę to zrobić?

Na przykład w celu retransmisji już załadowanego formularza graficznego podczas aktualizacji produktu, wraz z dodatkowymi zdjęciami dodanymi podczas aktualizacji

Ponieważ jest to skrypt javascript i dynamiczny, możesz zdefiniować własną klasę pasującą do interfejsu File i użyć jej zamiast tego.

Musiałem to zrobić z dropzone.js, ponieważ chciałem zasymulować przesyłanie pliku i działa to na obiektach File.