Загрузка файлов используя Ajax и jQuery

Загрузка файлов иногда необходима для сайтов, но загружать по одному файлу не очень удобно и долго. Благодаря jQuery мы может ускорить и облегчить эту задачу. Сегодня Мы будем создавать многочисленный Ajax загрузчик файлов, который будет использовать намного меньше ресурсов сервера, а также с красивым пользовательским интерфейсом.

Для этого урока мы будем использовать последнюю версию jQuery и Ajax. После загрузки, добавьте обе библиотеки в начало своей страницы.

				<script type="text/javascript" src="/js/jquery-1.4.2.js"  ></script>
				<script  type="text/javascript" src="/js/ajaxupload.3.5.js"  ></script>
				

HTML кодирование.

Как я уже сказал, закачка будет многочисленная. Мы не будет использовать классическое поле Файл. Таким образом, в первую очередь давайте создадим кнопку загрузки, на какую пользователь должен будет щелкнуть для выбора файлов.

				<div id="upload" >Загрузить  файл</div>
				

Для создания кнопки Вы можете использовать любые методы, создавать любые стили. Основная задача, это сделать кнопку привлекательной. Я не захотел использовать картинки и решил просто создать красивый стиль в CSS.

				#upload {
					margin:30px 200px; padding:15px;
					font-weight:bold; font-size:18px;
					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;
			    } 
				

Сейчас мы добавим различные службы, чтобы показывались различные службы во время обработки. Также мы сможет увидеть изображение файлов, какие мы будем загружать. Вот так выглядит HTML код:

				<!—Кнопа загрузки-->
				<div id="upload" >Загрузить  файл</div><span id="status" ></span>
				<!—Загруженные файлы-->
				<ul id="files" ></ul>
				

PHP кодирование.

Для создания самого процесса загрузки, мы будем использовать PHP скрипт, который будет отображать загрузился файл или нет и выводить соответствующие сообщение. Назовем наш обработчик upload-file.php.

				$uploaddir  = '/uploads/'; /*  Папку, куда будут загружаться файлы
				$file =  $uploaddir . basename($_FILES['uploadfile']['name']);
				if  (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
					echo "Загрузка успешно выполненна";
			    } else {
					echo "Ошибка загрузки";
			    }
			    

JavaScript кодирование

И, наконец, приступаем к JavaScript кодированию. Сама библиотека Ajax выполнит самую сложную работу, Вам необходимо только вставить следующий код в HTML страницу.

				$(function(){
					var btnUpload=$('#upload');
					var status=$('#status');
					new AjaxUpload(btnUpload, {
						action:  'upload-file.php',
						//Имя  загружаемого файла
						name: 'uploadfile',
						onSubmit: function(file,  ext){
							if (! (ext  && /^(jpg|png|jpeg|gif)$/.test(ext))){
							// Проверяет правильность расширения файла 
							status.text(только JPG, PNG or GIF файлы могут быть загружены ');
							return  false;
							}
							status.text(Загрузка...');
						},
						onComplete:  function(file, response){
							//После  завершения очищается статус
							status.text('');
							//Добавляет  загруженные файлы в список
							if(response==="success") {
								$('<li></li>').appendTo('#files').html('<img  src="./uploads/'+file+'" alt="" /><br  />'+file).addClass('Удачно');
							} else{
								$('<li></li>').appendTo('#files').text(file).addClass('Ошибка');
						}
						}
					});
			    });
				

Чтобы использовать библиотеку Ajax нам не обходимо инициализировать объект загрузки и обеспечить его параметром. Первым параметром является кнопка объекта, а второй – отображение загрузки. Второй параметр принимает различный варианты, чтобы нам дать больше контроля над процессом.

Вот, что мы сделали:

1) Определили место, куда будет загружаться файл. 2) Создали скрытое имя файла, которое будет использоваться для загрузки. 3) Параметр onSubmit позволяет выполнять некоторые функции, прежде чем файл будет загружаться. 4) Параметр OnComplete выполняет действие после окончания загрузки, например мы, выводим загруженные файлы.

Если Вы хотите ограничить количество файлов, которые пользователь может загрузить, просто используйте параметр this.disable () в onSubmit или в OnComplete отключите кнопку загрузки после выполнения условия.

На этом все. Используйте с удовольствием.