Как создать экземпляр объекта File в JavaScript?

Ответ 1

В соответствии со спецификацией API файлов W3C конструктор файла требует 2 (или 3) параметра.

Итак, для создания пустого файла выполните:

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

• Первый аргумент - это данные, предоставленные в виде массива строк текста;
• Второй аргумент - имя файла;

• Третий аргумент выглядит так:

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

Он работает в FireFox, Chrome и Opera, но не в Safari или IE/Edge.

Ответ 2

Теперь вы можете!

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

Ответ 3

Обновление

BlobBuilder был obsoleted посмотреть, как вы его используете, если вы используете его для тестирования.

В противном случае примените приведенные ниже стратегии миграции к Blob, например ответы на этот вопрос.

Вместо этого используйте Blob

В качестве альтернативы существует Blob, который вы можете использовать вместо File, поскольку это то, что происходит с интерфейсом файла спецификация W3C:

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

Интерфейс File основан на Blob, наследует функциональность blob и расширяет ее для поддержки файлов в пользовательской системе.

Создайте Blob

Используя BlobBuilder, как это описано в существующем методе JavaScript, который берет файл для загрузки через XMLHttpRequest и предоставляет Blob для он работает так:

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 более полно, но не будет успешно загружена, поскольку я не могу разоблачить логика загрузки в долгосрочной перспективе.

Ответ 4

Вы не можете создать экземпляр.

Обычно вы получаете их из формы для загрузки файлов. Эта статья хорошо объясняет это.

Ответ 5

Теперь это возможно и поддерживается всеми основными браузерами: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

Ответ 6

Идея... Чтобы создать объект File (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

Но размер объекта неправильный...

Почему я должен это делать?

Например, для повторной передачи уже загруженной формы изображения во время обновления продукта вместе с дополнительными изображениями, добавленными во время обновления

Ответ 7

Поскольку это javascript и dynamic, вы можете определить свой собственный класс, который соответствует интерфейсу File, и использовать его вместо этого.

Мне нужно было сделать это с помощью dropzone.js, потому что я хотел смоделировать загрузку файла, и он работает с объектами File.