Как дать Blob, загруженному как FormData, имя файла? - PullRequest
Новая
       11

Как дать Blob, загруженному как FormData, имя файла?

55 голосов
/ 12 июля 2011

В настоящее время я загружаю изображения, вставленные из буфера обмена со следующим кодом: 

// 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

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

Ответы [ 8 ]

121 голосов
/ 30 января 2012

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

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

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

23 голосов
/ 28 января 2016

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

Помимо превосходного решения 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 голосов
/ 21 июля 2011

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

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

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

function getFileName() {
 // logic to generate file names
}
1 голос
/ 15 июля 2011

Не проверял, но это должно привести к предупреждению 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);
0 голосов
/ 23 января 2012

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

Я еще не нашел хороший способ для Firefox; Вероятно, маленький кусочек Flash, такой как downloadify, необходим для именования BLOB-объектов.

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

Может быть, это больше для загрузки BLOB-объектов, но это связано.

0 голосов
/ 21 июля 2011

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

0 голосов
/ 20 июля 2011

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

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);
0 голосов
/ 20 июля 2011

Это имя выглядит полученным из 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 и удалить любые тире.

...