Как создать объект File в JavaScript?

Ответы:

204

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

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

var f = new File([""], "filename");
  • Первый аргумент - это данные, представленные в виде массива строк текста;
  • Второй аргумент - это имя файла;
  • Третий аргумент выглядит так:

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

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

AlainD
источник
2
Производит Illegal constructorна Chrome 37 / Ubuntu, так что нет, это не работает
Себастьян Лорбер
2
Это работает в Firefox 28+, Chrome 38+ и Opera 25+. Однако Safari и IE до сих пор не реализуют этот конструктор (см. Caniuse.com/#feat=fileapi ). В настоящее время я ищу polyfill или способ эмулировать это, но пока не нашел подходящего решения.
Пьер-Адриен Буассон
@ PA.Buisson Я не уверен, что это верно для всех случаев (этого было достаточно для меня), но вместо этого вы можете использовать конструктор Blob (), как это было предложено здесь
raymondboswel
2
Какова альтернатива этому для окон края?
Рави Мишра
3
Для IE11 вы можете использовать класс Blob для создания объекта File. Это, кажется, самое портативное решение для меня. file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
Джесси Хоган
30

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

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

Бесконечный
источник
Нет, это не работает в Chrome. См. Code.google.com/p/chromium/issues/detail?id=164933 . Проверено, что это не работает в Chrome 36 OSX.
Рэй Николус
тогда я проверю, что он ДОЗА работает в Chrome 35 OSX при запускеnew File([], '')
Endless
Только что протестировано, в 35 тоже не работает. Пожалуйста, измените свой ответ, чтобы отразить тот факт, что это работает только в Firefox.
Рэй Николас
хм, вы правы это сработало только для меня, так как я активировал экспериментальный флаг Chrome ... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif
Endless
Производит Illegal constructorна Chrome 37 / Ubuntu
Себастьян Лорбер
19

Обновить

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

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

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

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

Ник Йозевски
источник
11
Этот комментарий устарел. Не используйте BlobBuilder, используйте конструктор Blob. Blob (['mythingy'], {type: "thingy"})
один - Велмонт
Этот код не запускается. TypeError: BlobBuilder не является конструктором
Pointer Null
2
К сожалению, BlobBuilder устарел: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD.
DataTransferItemList.addтребует Fileне Blob. Итак, на оригинальный вопрос: как создать экземпляр File ?
Томаш Зато - Восстановить Монику
1

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

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
Павел Евстигнеев
источник
4
Как бы мне ни было больно это говорить, край является основным браузером.
li x
Я не видел много людей, использующих его на самом деле. caniuse.com/#feat=fileapi - IE 2,6%, Edge - 1,4%, Opera Mini - 2,7%. На netmarketshare.com/browser-market-share.aspx это 4,3%. Если вам не безразличен Edge, вам нужно найти обходной путь: developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
Павел Евстигнеев,
Evestigneev вы неверно истолковали результаты, поскольку поддерживаемые браузеры имеют глобальное использование около 0,2%. Эта цифра показывает, сколько браузеров используют API, в то время как сам Edge / IE составляет около 15% браузеров, которые все еще используются.
Ли
0

Идея ... Создать объект 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

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

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

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

SNS - Web et Informatique
источник
-5

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

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

Ian1971
источник