Як надати Blob-файлу, завантаженому як FormData, ім'я файлу?

Зараз я завантажую зображення, вставлені з буфера обміну з таким кодом:

// Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
            "POST",
            "/upload",
            true
        );
request.send(form);

Виходить завантажене поле форми з отриманням імені, подібного до цього: Blob157fce71535b4f93ba92ac6053d81e3a

Чи є спосіб встановити це або отримати це ім'я файлу на стороні клієнта, не роблячи жодного зв'язку на стороні сервера?

Для Chrome, Safari та Firefox просто використовуйте це:

form.append("blob", blob, filename);

(див. документацію MDN )

Додаючи це сюди, оскільки, здається, його тут немає.

Окрім чудового рішення, form.append("blob",blob, filename);ви також можете перетворити BLOB на Fileпримірник:

var blob = new Blob([JSON.stringify([0,1,2])], {type : 'application/json'});
var fileOfBlob = new File([blob], 'aFileName.json');
form.append("upload", fileOfBlob);

Оскільки ви отримуєте дані, вставлені в буфер обміну, немає надійного способу дізнатися про походження файлу та його властивості (включаючи ім’я).

Найкраще поставити власну схему іменування файлів і надіслати разом із крапкою.

form.append("filename",getFileName());
form.append("blob",blob);

function getFileName() {
 // logic to generate file names
}

Це ім’я виглядає похідним від GUID URL-адреси об’єкта. Виконайте наступне, щоб отримати URL-адресу об’єкта, з якої походить ім’я.

var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);

object_urlбуде відформатовано як blob:{origin}{GUID}у Google Chrome та moz-filedata:{GUID}у Firefox. Початком є ​​протокол + хост + нестандартний порт для протоколу. Наприклад, blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743або blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99. Ви, ймовірно, хочете витягти GUID і видалити всі тире.

Не тестував, але це повинно попередити URL-адресу даних BLOB:

var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();

var reader = new FileReader();
reader.onload = function(event) {
  alert(event.target.result); // <-- data url
};
reader.readAsDataURL(blob);

Це насправді залежить від того, як сконфігурований сервер з іншого боку та з якими модулями для того, як він обробляє повідомлення BLOB. Ви можете спробувати вказати потрібне ім’я у шляху до вашої публікації.

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);

Чи використовуєте ви Google App Engine? Ви можете використовувати файли cookie (створені за допомогою JavaScript), щоб підтримувати зв'язок між іменами файлів та іменем, отриманим від сервера.

Коли ви використовуєте Google Chrome, ви можете використовувати / зловживати Google Filesystem APIцим. Тут ви можете створити файл із зазначеним іменем та записати до нього вміст BLOB-об'єкта. Тоді ви можете повернути результат користувачеві.

Я ще не знайшов хорошого способу для Firefox; ймовірно, downloadifyдля назви краплини потрібен невеликий фрагмент Flash, подібний до цього.

IE10 має msSaveBlob()функцію в BlobBuilder.

Можливо, це більше для завантаження крапки, але це пов’язано.