Jak utworzyć instancję obiektu File w JavaScript?
Jest File
obiekt w JavaScript. Chcę utworzyć instancję do celów testowych.
Próbowałem new File()
, ale dostaję błąd "nielegalnego konstruktora".
Czy można utworzyć File
obiekt ?
File Object reference: https://developer.mozilla.org/en/DOM/File
6 answers
Zgodnie ze specyfikacją W3C File API, konstruktor plików wymaga 2 (lub 3) parametrów.
Więc aby utworzyć pusty plik wykonaj:
var f = new File([""], "filename");
- pierwszy argument to dane podane 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})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-18 11:49:34
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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-10 13:38:10
Update
BlobBuilder został przestarzały zobacz, jak go używać, jeśli używasz go do celów testowych.
W Przeciwnym Razie zastosuj poniższe strategie migracji do Blob , takie jak odpowiedzi na to pytanie .
Użyj zamiast tego Bloba
Jako alternatywę istnieje Blob, którego można użyć zamiast File, ponieważ od niego wywodzi się interfejs plików W3C spec :
interface File : Blob {
readonly attribute DOMString name;
readonly attribute Date lastModifiedDate;
};
Interfejs plików jest oparty na obiekcie Blob, dziedziczy funkcjonalność obiektu blob i rozszerza ją o obsługę plików w systemie użytkownika.
Utwórz Blob
Użycie BlobBuilder w ten sposób na istniejącej metodzie JavaScript, która pobiera plik do przesłania przez XMLHttpRequest
i dostarcza do niego Bloba działa tak:
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);
Extended example
Reszta próbki jest na jsFiddle w bardziej kompletna moda, ale nie zostanie pomyślnie przesłana, ponieważ nie mogę ujawnić logiki przesyłania w sposób długoterminowy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:33:26
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",
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-22 11:22:47
Pomysł stworzenia obiektu Pliku (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 Obiektowego:
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 do retransmisji formularz obrazu już przesłany podczas aktualizacji produktu wraz z dodatkowymi obrazami dodanymi podczas aktualizacji
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-23 05:45:57
Ponieważ jest to javascript i dynamic, możesz zdefiniować własną klasę, która pasuje do interfejsu plików i użyć jej zamiast tego.
Musiałem to zrobić z dropzone.js ponieważ chciałem symulować przesyłanie plików i działa na obiektach plików.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-25 13:56:45