Загрузка файлов в офлайн-приложениях HTML5

Я работаю над веб-приложением, которое потенциально будет использоваться в средах с нестабильным подключением к Интернету. Я реализую его как офлайн-приложение HTML5, которое будет использовать локальное хранилище HTML5 (на самом деле плагин jQuery jStorage). Это приложение, управляемое вводом данных, поэтому все новые записи, созданные в автономном режиме, сохраняются в локальном хранилище и будут синхронизированы позже с сервером, когда подключение к Интернету будет восстановлено. У меня это почти получилось, но теперь я столкнулся с требованием, когда пользователям действительно нужно будет загрузить изображение вместе с отправкой данных.
Я нашел эту спецификацию API HTML5 - http://www.w3.org/TR/file-upload/, в котором говорится о загрузке файлов и автономном доступе. Прежде чем я углублюсь в это - есть ли какие-нибудь оболочки для этой функции, которые упростили бы это для меня?
Я также только что нашел эту статью - http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/, который использует общедоступный TwitPic API, и я хотел получить профессиональные отзывы от людей здесь.

Спасибо!


html file-upload local-storage offline cache-manifest
person Insider Pro    schedule 28.02.2012    source источник
comment
Я не совсем уверен, что понимаю вас. Вы не можете загрузить файл на сервер в автономном режиме. Период. Демонстрационная программа, на которую вы установили ссылку, должна удерживать файл и ждать соединения, но нет волшебного способа обойтись без подключения к Интернету.   -  person Raymond Camden    schedule 20.12.2012
comment
@RaymondCamden - это именно то, что я искал - держите файл (или его содержимое) где-нибудь, пока соединение не станет снова доступным. Я пишу приложение, которое иногда подключается, и оно не может полагаться на постоянное подключение. Он «кэширует» несинхронизированные записи в локальном хранилище HTML5 и синхронизирует их с сервером всякий раз, когда соединение доступно. Мне просто интересно, как это можно сделать с файлами.   -  person Insider Pro    schedule 28.12.2012

Ответы (3)


arrow_upward
4
arrow_downward

Я знаю, что прошло много времени с тех пор, как я спрашивал об этом, но я все еще вижу, что этот вопрос был добавлен в избранное и получил голоса, поэтому я решил, что расскажу, как я в итоге решил это. В моем случае файлы не такие большие, поэтому я просто решил кодировать их MIME, а затем сохранить строку в HTML5 localStorage. Это работает как оберег.

person Insider Pro    schedule 11.04.2014
comment
Более подробная информация была бы полезна. Этот вопрос SO касается изображений, но он должен служить хорошим примером выполнения того, что примерно описано в этом ответе. - person Kenny Evitt; 23.09.2014
comment
Привет, @insiderpro, так что вы сохраняете изображения в localstorage, и как вы потом отправляете их на сервер? Как base64? 10x - person Bill; 27.04.2017
comment
@Bill, да, я отправляю их на сервер как строки base64. - person Insider Pro; 05.05.2017
comment
Привет, @insiderpro, спасибо. Не могли бы вы поделиться примером того, как преобразовать в базу 64? - person Bill; 06.05.2017
comment
@Bill, мое решение - киоск, поэтому я контролирую, какой браузер использовать. Это может быть совместимо со всеми браузерами, а может и не быть. ‹Тип ввода = идентификатор файла = myfile /› ‹script› функция readImage (ввод) {если (input.files && input.files [0]) {var FR = new FileReader (); FR.onload = function (e) {$ ('# job-thumb'). Attr ('src', e.target.result); $ ('# job-thumb'). attr ('data-mime', e.target.result); }; FR.readAsDataURL (input.files [0]); }} $ (# myfile) .change (функция () {readImage (this);}); ‹/Script› - person Insider Pro; 08.05.2017

arrow_upward
1
arrow_downward

Некоторое время назад я написал статью об API файлов HTML5 - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

Также обратитесь к репозиторию GitHub - https://github.com/mailru/FileAPI для дополнительных элементов управления.

person Pankaj Parashar    schedule 27.03.2013

arrow_upward
1
arrow_downward

Я не думаю, что localStorage будет здесь правильным ответом, потому что localStorage сохраняет только строки и имеет ограничение в 5 мегабайт.

Я предлагаю что-нибудь вроде http://pouchdb.com

Но если вы настаиваете на localStorage, то в Mozilla Hacks есть статья о хранении изображений в localStorage: http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

indexedDB может быть лучшим местом для хранения файлов: http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

person ehrhardt    schedule 16.05.2014