Отправить файл с XmlHttpRequest: Потоковое? - PullRequest
Новая
       45

Отправить файл с XmlHttpRequest: Потоковое?

12 голосов
/ 23 июня 2011

Я пытаюсь загрузить большие файлы с помощью перетаскивания.У меня есть этот фрагмент кода Javascript: 

xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-File-Name', file.name);
xhr.setRequestHeader('X-File-Size', file.size);
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);

, где url - строка целевого URL, а file - Blob (в соответствии с http://www.w3.org/TR/XMLHttpRequest2/#the-send-method), который я получилпосле перетаскивания файла. Этот код работает в Chrome 12, Safari 5 и Firefox 4 и отправляет необработанное содержимое файла в теле HTTP-запроса.

Однако, если файл достаточно большой,запрос никогда не отправляется. Вместо этого объект XMLHttpRequest вызывает событие и выдает ошибку (без какого-либо полезного сообщения). В моей среде это ограничение составляет 86 МБ, но оно варьируется от компьютера к компьютеру.

Консоль javascript в Chromeпоказывает сообщение: 

POST http://localhost/xfiles/xfiles.php undefined (undefined)

, которое не имеет никакого отношения к моему коду (которое отлично работает с файлами меньшего размера).

Похоже, что браузер читает весь файл в памяти и перед отправкойВероятно, есть исключение из-за нехватки памяти или что-то подобное, что останавливает процесс. В любом случае, HTTP-запрос не отправляется, поэтому наверняка пределы сервера не имеют ничегоg для решения этой проблемы.

В любом случае, чтение всего файла является пустой тратой ресурсов .

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

Ответы [ 3 ]

7 голосов
/ 24 июня 2011

Попробуйте использовать метод Blob.slice, чтобы разбить Blob на несколько кусков и отправить каждый как отдельный запрос.

6 голосов
/ 09 декабря 2013

Сегодня в chrome 31 (windows) xhr.send (файл) не считывает весь файл в память. Дело в том, что я пытаюсь xhr.send файл 100 МБ и смотрю на диспетчер задач для использования памяти Chrome - он только немного увеличивается во время загрузки файла 100 МБ.

В качестве примечания, xhr.send(file) лучше подходит для загрузки PUT, для POST более подходящим будет FormData: 

  var formData = new FormData();
  formData.append("thefile", file);
  xhr.send(formData);

Однако использование FormData увеличивает время загрузки примерно на 50% - возможно, из-за кодировки base64.

1 голос
/ 23 июня 2011

Проверьте этот плагин jquery, если вы используете jquery http://github.com/valums/file-uploader

Надеюсь, это поможет.

...