Загрузка файлов AJAX с помощью XMLHttpRequest

Недавно возникла идея состряпать на Sketch, что-нибудь интересное. Хотел залить в свое портфолио на Behance и в итоге, пришла идея реализовать форму для загрузки файлов в AJAX. Немного почитав про XMLHttpRequest, решил реализовать эту идею в рабочее решение.

В этой статье я подробно опишу как мы будем реализовывать отправку файла на сервер в AJAX. И постараюсь объяснить так, что даже поймет умственно отсталый слесарь-тракторист (если такие и бывают).

Думаю, нам стоит начать с теории и понять, что это такое XMLHttpRequest и с чем его едят? Советую вам не лениться и немного почитать об этом объекте, ибо, я сам не особо понимал как его применять и для чего. В моем понимании, это был простой метод $.get / $.post, только расширенный. Но, прочитав документацию я понял, что это очень классная вещь и разжевав ее для вас, опишу как можно ясней для чего нам XMLHttpRequest.

XMLHttpRequest - что это?

Исходя из логических соображений, можно понять, что, XMLHttpRequest - это объект JavaScript. Окей, кэп, это думаю вам понятно... А для чего его применять? XMLHttpRequest мы можем использовать для передачи данных методом GET или POST на протокол HTTP / HTTPS. Проще говоря, на наш сервер. К примеру, сделать авторизацию без перезагрузки страницы или открыть запись на сайте без перезагрузки, например, как в этом блоге.

Конечно, если вы уже работали с подобным, то, должны знать про такие методы, как: $.get(), $.post(), $.ajax и т.п. и возникает вопрос, разницы между этими методами и XMLHttpRequest. Большой разницей является то, что XMLHttpRequest дает больше настроек, чем эти методы.

Как работать с XMLHttpRequest?

Давайте я разберу небольшие примеры и думаю вы поймете разницу и как работать с XMLHttpRequest. Хочу заранее предупредить, что мы будем посылать методы асинхронно. Подробнее про синхронный и асинхронный способ отправки, читай в русской документации XMLHttpRequest.


_11var request = new XMLHttpRequest();
_11request.open('GET', 'https://archakov.im/', true); 
_11req.onreadystatechange = function (event) {
_11	if (req.readyState == 4) {
_11		 if (req.status == 200)
_11			alert(req.responseText);
_11		 else
_11			alert("Ошибка: "+ req.status );
_11	}
_11};
_11req.send(null);

Состояния readyState:

И так, думаю вы поняли как работать с XMLHttpRequest и нам можно приступать к дальнейшей разработке нашей формы. Я уже слепил форму и исходя из этой формы, мы сделаем рабочий пример. При этом, мы будем использовать: JavaScript, jQuery, PHP.

Первое, что нам нужно, это локальный сервер. Если вы пользуетесь Windows, то посоветую использовать Open Server или Denwer. Но, из двух вариантов я советую больше Open Server, у него больше настроек и полезных дополнений. Но, если вы владелец Mac (OS X), то советую использовать MAMP PRO (скачивайте сразу крякнутую версию).

Объяснять как установить локальный сервер я не буду, тут разбирайтесь сами. Создайте в корне вашего локального сайта: index.html, script.js, style.css.

Верстать форму мы не будем, а лучше сразу выложу готовый HTML код формы.

index.html


_27<!DOCTYPE html>
_27<html lang="en">
_27	<head>
_27			<meta charset="UTF-8">
_27			<title>Form File Uploader</title>
_27			<link href="style.css" rel="stylesheet">
_27	</head>
_27	<body>
_27
_27	<div class="container">
_27
_27			<div class="form-upload">
_27
_27					<ul class="form-upload-list"></ul>
_27
_27					<div class="form-upload-button-block">
_27							<button class="form-upload-button">Upload file...</button>
_27							<input name="file" type="file">
_27					</div>
_27			</div>
_27
_27	</div>
_27
_27	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
_27	<script src="script.js"></script>
_27	</body>
_27</html>

script.js