Как лучше всего загружать файлы в современный браузер
Я хочу загрузить (один) файл на сервер и показать ход загрузки.
Я знаю, что могу загрузить файл с помощью HTTP POST. Я не знаком с web-сокетами, но, как я понимаю, двоичные данные также могут быть отправлены таким образом, и поскольку websockets являются двунаправленными, я мог бы получить прогресс загрузки.
Я не беспокоюсь о старых браузерах, поэтому решения iframe и flash не очень привлекательны, если нет значительного преимущества в этом маршрут.
мне также любопытно, как к лучшей технологии на стороне сервера. Являются ли их преимущества для использования сервера wsgi, такого как Django? Или, может быть, неблокирующая технология ввода-вывода, такая как Node.Джей? Я не спрашиваю, лучше ли веб-фреймворк x, чем веб-фреймворк y, или сервер x лучше сервера y. но просто то, что должна иметь идеальная технология для загрузки объекта в клиенте.
обновление:похоже, что на стороне сервера нет принимая во внимание технологии/API, доступные на клиенте, чтобы облегчить загрузку.
5 ответов:
Edit (2017-10-17): на данный момент, есть также возможность использовать Fetch API. Он предлагает по существу те же возможности, что и XMLHttpRequest за более современным API на основе обещаний. Там есть полифилл для браузеров, которые не поддерживают
window.fetch()изначально (в основном это Internet Explorer и более старые версии Safari прямо сейчас).запрос и веб-сокеты и что-то еще
четко XMLHttpRequest. Своих возможностей в современных браузерах огромны и охватывают практически все сценарии. Он будет создавать стандартный запрос POST или PUT, с этим может справиться любая комбинация веб-сервера и фреймворка.
хотя веб-сокеты хороши для некоторых сценариев, это другой протокол, который добавляет много сложности - их стоит использовать только в том случае, если вам нужны ответы в реальном времени от сервера. И как вы сами заметили, другие подходы, такие как Flash, просто уродливы хаки.
отправка двоичных данных
обычно у вас не будет прямого доступа к файлам. Так что у вас будет
<input type="file">поле формы где-то на Вашей странице и ждать, пока пользователь выберет файл. Тогда варианты:
- отправка только содержимое файла:
request.send(input.files[0]). Тело запроса будет содержимым файла и ничего больше, никакая кодировка не будет выполнена, и никакие метаданные, такие как имя файла, не будут переданы. совместимость с браузерами: Chrome 7, Firefox 3.6, Opera 12, IE 10.- отправка данных всей формы:
request.send(new FormData(input.form)). Здесь содержимое формы будет закодировано какmultipart/form-data, что означает, что вы можете отправить несколько полей формы и метаданные, такие как имена полей и файлов, также будут переданы. Вы также можете изменитьFormDataобъект перед его отправкой. В зависимости от серверной платформы обработка этого запроса может быть проще, чем необработанные данные, обычно существует много помощников можете использовать. совместимость с браузерами: Chrome 6, Firefox 4, Opera 12, IE 10.- отправка типизированного массива: на всякий случай у вас нет файла, но вы просто хотите отправить некоторые двоичные данные, которые вы генерируете на лету. Здесь не выполняется дополнительное кодирование, так что на стороне сервера это работает как отправка содержимого файла. совместимость с браузерами: Chrome 9, Firefox 9, Opera 11.60, IE 10.
отображение загрузить
вы можете слушать
progressсобытийXMLHttpRequest.upload. Элементprogressсобытий естьloadedиtotalсвойства, которые позволяют определить, как далеко вы получили с вашим запросом. совместимость с браузерами: Chrome 7, Firefox 3.5, Opera 11.60, IE 10.библиотеки JavaScript
есть, конечно, существующие библиотеки, обертывающие функциональность, описанную здесь. Они упомянуты в другом ответы, поиск в интернете, безусловно, появится еще больше. Я явно не хочу предлагать здесь какие - либо библиотеки-какие из них, если таковые имеются, вы должны использовать, это просто вопрос предпочтения.
мой ответ довольно поздно, но здесь это идет:
короткий ответ:
XMLHttpRequest это лучший способ для загрузки файлов в современном браузере.
Что такое XMLHttpRequest?
XMLHttpRequest-это JavaScript объект, который был разработан Microsoft и принят Mozilla, Apple и Google. Это сейчас происходит стандартизировано в W3C. Это обеспечивает простой способ чтобы получить данные из URL-адреса без необходимости полного обновления страницы. Веб-страница может обновить только часть страницы, не нарушая то, что делает пользователь. XMLHttpRequest, который широко используется в AJAX Программирование.
несмотря на свое имя, XMLHttpRequest можно использовать для извлечения любой тип данных, а не только XML, и он поддерживает протоколы, кроме HTTP (включая файл и ftp).
The
вероятно, файловый API Javascript является лучшим способом в современных браузерах:
http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/
на стороне сервера мудрый... Я думаю, что любая из основных фреймворков имеет функцию HTTP file POST, хорошо охваченную.
Мне лично нравится плагин загрузки файлов blueimp jQuery (https://blueimp.github.io/jQuery-File-Upload/)
виджет загрузки файлов с поддержкой множественного выбора файлов, перетаскивания и падения, индикаторы выполнения, проверка и просмотр изображений, аудио и видео jQuery. Поддержка междоменных, фрагментированных и возобновляемых загрузок файлов и изменение размера изображения на стороне клиента. Работает с любой серверной платформой (PHP, Python, Ruby on Rails, Java, Node.Яш, Иди и т. д.) эта поддержка норматив Загрузка файла HTML-формы.
Демос:
Скачать (GitHub): https://github.com/blueimp/jQuery-File-Upload
файлы могут быть загружены через AJAX.
использовать jQuery form plugin. Он выполняет всю грязную работу по привязке файлов к форме и ее сериализации. Он также способен показывать прогресс загрузки.
стек сервера не имеет большого отношения к этому.