В моих предыдущих статьях мы узнали, как использовать перетаскивание файлов HTML5 и открывать файлы с использованием HTML5 и JavaScript . Теперь у нас есть действительный набор файлов, можно загружать каждый из них на сервер. Процесс происходит асинхронно в фоновом режиме, поэтому пользователь может выполнять другие задачи на странице, пока он происходит.
HTML
Давайте снова рассмотрим нашу HTML-форму:
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data"> <fieldset> <legend>HTML File Upload</legend> <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" /> <div> <label for="fileselect">Files to upload:</label> <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> <div id="filedrag">or drop files here</div> </div> <div id="submitbutton"> <button type="submit">Upload Files</button> </div> </fieldset> </form> Мы будем загружать файлы на страницу PHP, upload.php. Страница будет обрабатывать как запросы на загрузку Ajax, так и стандартные формы POST, когда пользователь нажимает «Загрузить файлы».
Наш JavaScript гарантирует, что загружаются только изображения JPG размером менее 300 000 байтов — значение, указанное в MAX_FILE_SIZE.
JavaScript
Во-первых, нам требуется дополнительная строка в нашей функции FileSelectHandler (), которая вызывается при выборе или отбрасывании одного или нескольких файлов. В нашем цикле File мы будем вызывать дополнительную функцию — UploadFile ():
// file selection function FileSelectHandler(e) { // cancel event and hover styling FileDragHover(e); // fetch FileList object var files = e.target.files || e.dataTransfer.files; // process all File objects for (var i = 0, f; f = files[i]; i++) { ParseFile(f); UploadFile(f); } }
Для загрузки файла требуется объект XMLHttpRequest2, который в настоящее время доступен в Firefox и Chrome. Перед тем, как сделать вызов Ajax, мы гарантируем, что метод .upload () доступен, и что у нас есть JPG с размером файла меньше значения формы MAX_FILE_SIZE:
// upload JPEG files function UploadFile(file) { var xhr = new XMLHttpRequest(); if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
Для метода XMLHttpRequest .open () заданы данные POST для upload.php, атрибута действия нашей формы загрузки. Кроме того, мы устанавливаем HTTP-заголовок для имени файла и передаем объект File методу .send ():
// start upload xhr.open("POST", $id("upload").action, true); xhr.setRequestHeader("X_FILENAME", file.name); xhr.send(file); } }
PHP
Наш PHP-файл upload.php теперь проверяет HTTP-заголовок X_FILENAME, чтобы различать запросы Ajax и стандартные формы POST:
<?php $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
Если имя файла установлено, PHP может извлечь опубликованные данные и вывести их в новый файл в папке «uploads». Удивительно, что это может быть достигнуто в одной строке кода:
if ($fn) { // AJAX call file_put_contents( 'uploads/' . $fn, file_get_contents('php://input') ); echo "$fn uploaded"; exit(); }
Стандартные сообщения HTML multipart / form-data могут обрабатываться с использованием обычных функций PHP $ _FILE:
else { // form submit $files = $_FILES['fileselect']; foreach ($files['error'] as $id => $err) { if ($err == UPLOAD_ERR_OK) { $fn = $files['name'][$id]; move_uploaded_file( $files['tmp_name'][$id], 'uploads/' . $fn ); echo "<p>File $fn uploaded.</p>"; } } }
Вы можете просмотреть демонстрационную страницу , однако обратите внимание, что она размещена на сервере без поддержки PHP, и загрузка не произойдет. Поэтому, пожалуйста, скачайте файлы, чтобы изучить код и установить его на свой собственный сервер PHP.
Приведенный выше код будет работать, но пользователь не будет знать, началась ли загрузка файла, завершена или не удалась. Вам необходимо прочитать последний выпуск этой серии: Как создать индикатор выполнения загрузки файлов в HTML5 и JavaScript …
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о HTML5? Почему бы не спросить об этом на наших форумах ?