Как дать 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

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

50
dom form-data google-chrome javascript

8 ответов

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

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

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

103

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

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

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

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

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

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

не протестировали его, но это должно предупредить 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);
1

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

0

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

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

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

0

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

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

в IE10 есть

0