В этой части хочу рассказать о том, как можно все эти операции с файлами завернуть в AngularJS.
Рекомендую пролистать предыдущие части перед началом разбора этой:
Пишем свой Uploader с нуля на javascript используя FileApi. Часть5. +AngularJS
4
Tag Archives: fileApi
Пишем свой Uploader с нуля на javascript используя FileApi. Часть4
В частях 1, 2, 3 мы научились читать файлы с диска.Теперь попробуем разобрать процесс отправки файлов на сервер с помощью технологии ajax.
В начале вспомним как работать с аяксом для передачи файла на сервер:
- Метод передачи будет POST
- Обязательно нужно будет указать Content-Type, а именно multipart/form-data
- Правильно сформировать само тело сообщения
Получим следующий код(по пунктам):
var request = new XMLHttpRequest();
request.onreadystatechange = ajaxReady;
request.open('POST', 'uploader.php', true); // (1)
request.setRequestHeader('Content-Type', contentType); // (2)
request.sendAsBinary(createTestMsg()); // (3)
Пишем свой Uploader с нуля на javascript используя FileApi. Часть2
Вот и созрело продолжение первой части, где мы разобрались как можно использовать родной объект FileReader для чтения файла.
Давайте еще добавим прогресс чтения файла для нашего загрузчика. Для этого зададим callback метод для FileReader:
reader.onprogress = updateProgress;
Пишем свой Uploader с нуля на javascript используя FileApi. Часть1
Отметим ключевые моменты, которые нас интересуют по FileApi:
– у input с атрибутом type=”file” теперь есть свойство files(массив объектов класса File)
а объект класса File содержит следующие свойства:
name — имя файла
type — MIME тип файла
size — размер в байтах