Пишем свой Uploader с нуля на javascript используя FileApi. Часть4

В частях 1, 2, 3 мы научились читать файлы с диска.Теперь попробуем разобрать процесс отправки файлов на сервер с помощью технологии ajax.

В начале вспомним как работать с аяксом для передачи файла на сервер:

  1. Метод передачи будет POST
  2. Обязательно нужно будет указать Content-Type, а именно multipart/form-data
  3. Правильно сформировать само тело сообщения

Получим следующий код(по пунктам):

var request = new XMLHttpRequest(); 
request.onreadystatechange = ajaxReady; 
request.open('POST', 'uploader.php', true); // (1)
request.setRequestHeader('Content-Type', contentType); // (2)
request.sendAsBinary(createTestMsg()); // (3)

Continue reading

Пишем свой Uploader с нуля на javascript используя FileApi. Часть3

В этой части мы рассмотрим ключевой момент: чтение файла частями – это очень важно при отправке больших файлов( от 400-700МБ ), т.к. если мы будем пытаться их читать целиком – это вызовет дикие тормоза браузера.

Continue reading

Пишем свой Uploader с нуля на javascript используя FileApi. Часть2

Вот и созрело продолжение первой части, где мы разобрались как можно использовать родной объект FileReader для чтения файла.

Давайте еще добавим прогресс чтения файла для нашего загрузчика. Для этого зададим callback метод для FileReader:

reader.onprogress = updateProgress;

Continue reading

Пишем свой Uploader с нуля на javascript используя FileApi. Часть1

Отметим ключевые моменты, которые нас интересуют по FileApi:
– у input с атрибутом type=”file” теперь есть свойство files(массив объектов класса File)
а объект класса File содержит следующие свойства:
name — имя файла
type — MIME тип файла
size — размер в байтах

Continue reading