Як створити об'єкт File у JavaScript?


Відповіді:


204

Відповідно до специфікації 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
Здійснюється Illegal constructorна Chrome 37 / Ubuntu, так що ні, це не працює
Себастьян Лорбер

2
Це працює в Firefox 28+, Chrome 38+ та Opera 25 +. Однак, Safari та IE досі не реалізують цей конструктор (див. Caniuse.com/#feat=fileapi ). На даний момент я шукаю поліфіл або спосіб емуляції цього, але поки не знайшов підходящого рішення.
П’єр-Адрієн Буйсон

@ 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/isissue/detail?id=164933 . Перевірено, що він не працює в Chrome 36 OSX.
Рей Ніколус

то я переконаюсь, що він працює, коли він працює в Chrome 35 OSX при запускуnew File([], '')
нескінченний

Щойно перевірений, він також не працює в 35. Будь ласка, налаштуйте свою відповідь, щоб відображати той факт, що це працює лише у Firefox.
Рей Ніколус

хм, ви праві. це працювало лише для мене, оскільки я активував експериментальний хромований прапор ... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif
Нескінченний

Випускається Illegal constructorна Chrome 37 / Ubuntu
Себастьян Лорбер

19

Оновлення

BlobBuilder застарів побачити, як ви користуєтесь ним, якщо ви використовуєте його для тестування.

В іншому випадку застосуйте наведене нижче стратегію міграції переходу на Blob , наприклад відповіді на це запитання .

Замість цього використовуйте Blob

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

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

Інтерфейс файлів заснований на 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"})
odinho - Велмонт

Цей код не працює. TypeError: BlobBuilder не є конструктором
Pointer Null

2
На жаль, BlobBuilder є застарілим: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD.

DataTransferItemList.addFileне вимагає Blob. Отже, до початкового запитання: Як інстанціювати файл ?
Томаш Зато - Відновіть Моніку

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, то вам потрібно знайти якийсь обхідний розробник.microsoft.com/
Павло Евстігнеєв

Євєстгнеєв, ви неправильно інтерпретували результати, оскільки підтримувані браузери в усьому світі використовують близько 0,2%. Ця цифра полягає в тому, скільки браузерів використовує api, а сам edge / IE складає близько 15% браузерів, які все ще використовуються.
li x

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

Але розмір об'єкта неправильний ...

Чому мені потрібно це робити?

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


-5

Оскільки це javascript і динамічно, ви можете визначити свій власний клас, який відповідає інтерфейсу File, і використовувати його замість цього.

Мені довелося робити саме це з dropzone.js, тому що я хотів імітувати завантаження файлу, і він працює на файлових об'єктах.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.