Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «filereader»
Загрузка файлов в AngularJS 2013-08-26 20:05:11
Давно писал модуль для загрузки файлов и всё он был не идеальным. И тут подумал, если сейчас не ...
+ развернуть текст сохранённая копия
Давно писал модуль для загрузки файлов и всё он был не идеальным. И тут подумал, если сейчас не опубликую, то никогда не опубликую, идеал-то не достижим!
При составлении АПИ руководствовался принципом — как можно проще. Поэтому сначала несколько мыслей о загрузке файлов:
Загрузка только методом POST. Как показала практика, сам по себе файл почти никогда не бывает отдельной сущностью и всегда привязан к каким-то другим данным в базе, поэтому создавать запись вместе с загрузкой файла — плохая идея. Правильно: сначала создать запись, потом отдельным запросом добавить туда файл. Такой подход снимает кучу вопросов, связанных с отменой загрузки, параллельным редактированием описания файла и проч. Так же, создавая запись предварительно, мы можем получить в ответ данные о количестве свободного места на сервере и использовать их для валидации на клиенте.
Загрузка каждого файла отдельным запросом. На любом хостинге существует ограничение на максимальный размер POST-запроса (напр., 10 МБ). Если мы грузим одновременно 10 файлов, значит их вес в сумме не должен превышать 10МБ. В 99% случаев проще пожертвовать производительностью и не иметь проблем с такими ограничениями.
Никаких отложенных загрузок. Файл должен загружаться сразу после добавления (не в 2000 году, чай, живем), поэтому никаких методов работы с очередью — выбрал файл, выбрал еще 5 штук, удалил один, нажал «отправить» — не будет. Зато будет отмена загрузки.
Не стоит разделять загрузку файлов по кнопке и перетаскиванием. В моем случае любая область, помеченная директивой позволяет перетаскивать на нее файлы, а если это инпут с типом file, то еще и в проводнике можно выбрать. Очень удобно знать, что на кнопку можно перетаскивать, когда потянул в браузер 10 файлов, а дизайнер забыл подсветить поле перетаскивания, и гадаешь перетащатся ли они или откроются в новом окне. Читать дальше →
Тэги: angularjs, filereader, iframe, javascript, xhr, веб-разработка, загрузка, файл
[Из песочницы] Генератор ASCII-артов на HTML5 2013-06-10 15:32:09
 + развернуть текст сохранённая копия
Доброго времени суток, уважаемые хаброжители.
В этой статье я расскажу о том, как при помощи HTML5 можно сделать простенькое приложение, которое будет генерировать ASCII-арты на основе обычных изображений. Статья ориентирована на тех, кто только начинает свое знакомство с такой замечательной технологией, как HTML5, коим являюсь и я. Профессионалы вряд ли найдут для себя что то новое.
Дело было вечером, делать было нечего
Копался я недавно в интернете в поисках обоев и наткнулся на одно интересное изображение(1.1мб). И меня “зацепила” идея рисовать изображения разноцветными буквами. Порывшись в интернете узнал, что это называется ASCII-art. Ну и конечно же первая мысль: “А запилю ка я приложение, что бы мои любимые обои таким образом нарисовало!”
Сказано — сделано. Есть время, есть желание — почему бы не попробовать. Итак, прошу под кат
Тэги: acsii-art, canvas, filereader, html, html5, javascript, веб-разработка
HTML5: А в Firefox 3.6 уже есть FileReader 2010-07-09 13:02:57
... : if (!!FileReader) {
... ; var reader = new FileReader();
...
+ развернуть текст сохранённая копия
Сегодня утром я прочитал статью о работающем FileReader в Firefox 3.6 и сразу решил попробовать.
Суть FileReader в том, что он позволяет работать с локальными файлами до их попадания на сервер. Где это может быть полезно?
Самый попсовый пример: просмотр изображений перед тем, как отправлять их на сервер. У Яндекса это сделано в варианте flash-приложения, а в будущем можно будет обходиться без этого.
Кратко и по делу:
if (!!FileReader) {
var reader = new FileReader();
reader.onload = function() {
// reader.result - вот тут содержится загруженная информация
}
reader.readAsDataURL(f); // В параметре f передается сам файл
}
Что это за параметр такой "f"?
var f = document.getElementById("data").files[0];
где контрол на сайте выглядит так:
<input type="file" id="data" />
Работающий пример
Прочитать про DataURL чтобы понять пример (если вдруг кто еще не в курсе)
Заметка про FileAPI в Firefox
Тэги: base64, dataurl, file, filereader, html5
Главная / Главные темы / Тэг «filereader»
|
Взлеты Топ 5
Падения Топ 5
|
