HTML кодajax загрузчика

Дата добавления: 2015-08-31; просмотров: 718; Нарушение авторских прав

Давайте создадим HTML файл, в котором будет каркас нашего загрузчика файлов. Приведу HTML код, потом объясню что и к чему.

<div id="upload" >Upload File</div><span id="status" ></span> <ul id="files" ></ul>

Как видите, HTML код ajax загрузчика, невыносимо сложный. Но все же стоит прояснить, что и к чему:

<divid="upload" >UploadFile</div>- это наша кнопка подтверждения загрузки файла на сервер. Далее приведу CSS код оформления.

<spanid="status" ></span> - это блок, в который мы будем помещать ответ серверной стороны приложения. Или «Загружено», или «Ошибка».

<ulid="files" ></ul> - это список файлов, которые были загружены на сервер, нашим jquery + ajax загрузчиком.

Как и было обещано, приведу ниже CSS код стиля, кнопки подтверждения загрузки файла:

#upload{margin:30px 200px; padding:15px;font-weight:bold; font-size:1.3em;font-family:Arial, Helvetica, sans-serif;text-align:center;background:#f2f2f2;color:#3366cc;border:1px solid #ccc;width:150px;cursor:pointer !important;-moz-border-radius:5px; -webkit-border-radius:5px;}

СервернаяPHP сторона приложения

Как упоминалось в сущности метода, серверная сторона всего лишь выполняет копирование (сохранение) файла и возвращает результат своей работы («Загружено» или «Ошибка»). Но, это только пример, на который полагаться не стоит. Здесь нет защиты от хакерских взломов, и не установлены ограничение на размер файлов. Если у вы будете создавать загрузчик для всеобщего пользования, то обязательно реализуйте вышеперечисленные дополнения. Ниже приведен PHP код примера загрузчика файлов, создайте файл с именем upload-file.php, и поместите в него следующий код:

<?php$uploaddir = './uploads/';$file = $uploaddir . basename($_FILES['uploadfile']['name']); if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {echo "success";} else {echo "error";}?>

Если внимательно присмотреться, то заметите что здесь все написано русским текстом, а точнее:

$uploaddir – каталог на сервере, куда будут загружаться файлы.

$file – имя загружаемого файла, к которому прикрепляется путь к серверному каталогу.

Далее, если выполнено копирование файла на сервер, то выводим «Загружено» или, в случае непредвиденных проблем, выводим «Ошибка».

Самое простое уже сделано. Впереди самое интересное – jQuery + AJAX сторона загрузчика файлов.

<== предыдущая лекция	\|	следующая лекция ==>
Что мы сегодня узнаем?	\|	JavaScript код