Как создать экземпляр объекта File в JavaScript?
здесь File
6 ответов
согласно спецификации W3C File API, конструктор файлов требует 2 (или 3) параметров.
Итак, чтобы создать пустой файл, сделайте:
var f = new File([""], "filename");
- первый аргумент-это данные, представленные в виде массива строк текста;
- второй аргумент-это имя файла;
-
третий аргумент выглядит так:
var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})
он работает в FireFox, Chrome и Opera, но не в Safari или IE/Edge.
теперь вы можете!
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);
обновление
BlobBuilder был заменен посмотрите, как вы его используете, если вы используете его для целей тестирования.
в противном случае применить ниже с миграционными стратегиями собирается Blob, например, ответы на этот вопрос.
вместо этого используйте Blob
в качестве альтернативы есть Blob что вы можете использовать вместо как это то, что файловый интерфейс происходит от согласно W3C spec:
interface File : Blob {
readonly attribute DOMString name;
readonly attribute Date lastModifiedDate;
};
интерфейс файла основан на Blob, наследуя функциональность blob и расширяя его для поддержки файлов в системе пользователя.
создать Blob
С помощью BlobBuilder как это на существующем методе JavaScript, который принимает файл для загрузки через XMLHttpRequest
и поставлять шарик к нему работает отлично как это:
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);
продлен
остальная часть образца находится на jsFiddle более полным образом, но не будет успешно загружать, поскольку я не могу выставить логику загрузки в долгосрочной перспективе.
теперь это возможно и поддерживается всеми основными браузерами:https://developer.mozilla.org/en-US/docs/Web/API/File/File
var file = new File(["foo"], "foo.txt", {
type: "text/plain",
});
идея ... создать файловый объект (api) в javaScript для изображений, уже присутствующих в 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);
Не делай этого ! ... (но я все равно это сделал)
-> консоль дает результат, похожий на объектный файл:
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
но размер объекта, является неправильным ...
зачем мне это делать ?
например для ретрансляции форма изображения, уже загруженная во время обновления продукта, вместе с дополнительными изображениями во время обновления
поскольку это javascript и dynamic, вы можете определить свой собственный класс, который соответствует файловому интерфейсу, и использовать его вместо этого.
Я должен был сделать именно это с dropzone.js, потому что я хотел имитировать загрузку файла, и он работает с файловыми объектами.