Как предоставить 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

Есть ли способ установить это или получить эту клиентскую сторону имени файла, не делая никакой связи на стороне сервера?

Ответ 1

Для Chrome и Firefox просто используйте это:

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

(см. документация MDN)

Ответ 2

Добавление этого здесь, поскольку оно, кажется, не здесь.

Помимо превосходного решения 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);

Ответ 3

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

Лучше всего придумать схему имен файлов и отправить вместе с блобом.

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

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

Ответ 4

Не проверял, но должен предупредить URL-адрес данных blobs:

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

Ответ 5

Это имя выглядит на основе идентификатора GUID объекта. Выполните следующие действия, чтобы получить 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 и удалить любые тире.

Ответ 6

Это действительно зависит от того, как настроен сервер на другой стороне, и с помощью каких модулей он обрабатывает сообщение blob. Вы можете попробовать поместить нужное имя в путь для своего сообщения.

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

Ответ 7

Используете ли вы Google App Engine? Вы можете использовать файлы cookie (сделанные с помощью JavaScript) для поддержания отношений между именами файлов и именем, полученным с сервера.

Ответ 8

Когда вы используете Google Chrome, вы можете использовать/злоупотреблять Google Filesystem API для этого. Здесь вы можете создать файл с указанным именем и записать в него содержимое blob. Затем вы можете вернуть результат пользователю.

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

IE10 имеет функцию msSaveBlob() в BlobBuilder.

Возможно, это больше для загрузки blob, но это связано.