Забыли?

Мультизагрузка файлов с использованием Uploadify.

14 августа 2012 года

В этой статье я рассмотрю одновременную загрузку нескольких файлов на сайт с использованием jQuery плагина Uploadify.

Для начала идём на официальный сайт Uploadify и скачиваем там его бесплатную flash версию. К сожалению HTML5 версия не бесплатна и стоит 5 долларов за стандартную лицензию и 100 долларов за коммерческую. Итак, качаем отсюда Uploadify (на момент написания это версия 3.1.1): http://www.uploadify.com/download/

Мы получаем архив с кучей файлов, распаковываем его в директорию сайта. Для удобства, в директории сайта я создал поддиректории js для JavaScript, css для листов стилей и img для картинок. Закидываем uploadify.css в css, jquery.uploadify-3.1.min.js в js, uploadify-cancel.png в img. Также я создал поддиректорию upload_photos, куда будут складываться загруженные скриптом картинки (именно на их примере я и опишу работу Uploadify).

Так как Uploadify плагин для jQuery, нам нужно скачать последнюю версию jQuery (на момент написания 1.8.0) http://jquery.com/download/ и поместить файл jquery-1.8.0.min.js в директорию js.

Теперь создадим в корне файл index.html, куда запишем следующее:


<!DOCTYPE html>
<html>
  	<head>
    	<meta charset="utf-8" />
		<title></title>
		<link rel='stylesheet' href='css/uploadify.css' type='text/css' />
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script>

Стандартный доктайп и подключение стилей, jQuery и самого плагина.


<script type="text/javascript">
			$(document).ready(function() {
				$("#file_upload_1").uploadify({
					'swf'    : 'uploadify.swf',
					'uploader'    : 'uploadify.php',
					'checkExisting'  : 'check-exists.php',
					'cancelImg'   : 'img/cancel.png',
					'queueID'    : 'list',
					'auto'      : true,
					'multi'     : true,
					'progressData': 'speed',
					'buttonText'    : 'ДОБАВИТЬ ФОТО',
					'removeTimeout' : 1,
					'onUploadSuccess' : function(file, data, response) {
						$("#photos").append(data);
					}
				  });
			});
		</script>

Теперь мы должны настроить работу плагина. Ниже я опишу почти все настройки плагина и для чего они нужны:

Также я настроил реагирования на событие onUploadSuccess, которое возникает после окончания загрузки каждого фала. В данном примере оно получает вывод php скрипта и дописывает его в контейнер с ID photos.


	</head>
	<body>
		<div id='photos'></div>
		<p><input type="file" name="file_upload" id="file_upload_1" /></p>
		<div id='list'></div>
		<a href="javascript:$('#file_upload_1').uploadify('upload', '*');">Загрузить файлы.</a>
	</body>
</html>

Далее мы пишем код для кнопки, контейнера, куда будет писаться вывод и контейнера для выода прогресса загрузки. Ссылка, приведённая под ними нужна для того, что если бы мы установили параметр auto плагина в false, то для начала загрузки нужно было бы нажать на ссылку.

Всё, сам плагин настроен и теперь нужно настроить php скрипт, который примет фотографии и сохранит их.

Далее я приведу подредактированный скрипт uploadify.php из архива плагина, с улучшенной обработкой ошибок, а также файлу даётся уникальное имя, чтобы предотвратить загрузку вредоносных скриптов под видом фотографии.


<?php

// Define a destination
$targetFolder = '/photos/upload_photos'; // Relative to the root

if (!empty($_FILES)) {
	if ($_FILES['Filedata']['error']===UPLOAD_ERR_OK)
	{
		$tempFile = $_FILES['Filedata']['tmp_name'];
		$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

		//Уникальное имя для загруженной фотографии
		$new_name=md5(uniqid(rand(),1));
		//Если вдруг такой файл есть, придумаем другое имя
		while (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $new_name))
		{
			$new_name=md5(uniqid(rand(),1));
		}
		$targetFile = $targetPath . '/' . $new_name;	

		// Validate the file type
		$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
		$fileParts = pathinfo($_FILES['Filedata']['name']);
	
		if (in_array($fileParts['extension'], $fileTypes)) {
			move_uploaded_file($tempFile, $targetFile.'.'.$fileParts['extension']);
			echo "Добавлен файл".targetFile.'.'.$fileParts['extension'].”<br />”;
		} else {
			echo 'error: Invalid file type.';
		}
	}
	else
	{
		switch ($_FILES['Filedata']['error'])
		{
			case UPLOAD_ERR_INI_SIZE:
				echo 'error: Размер принятого файла превысил максимально допустимый размер, который задан директивой upload_max_filesize конфигурационного файла php.ini';
				break;
			case UPLOAD_ERR_FORM_SIZE:
				echo 'error: Размер загружаемого файла превысил значение MAX_FILE_SIZE, указанное в HTML-форме';
				break;
			case UPLOAD_ERR_PARTIAL:
				echo 'error: Загружаемый файл был получен только частично';
				break;
			case UPLOAD_ERR_NO_FILE:
				echo 'error: Файл не был загружен';
				break;
			
		}
	}
}
?>

В моём скрипте после загрузки фотографии для неё создаётся миниатюра, но данная тема выходит за рамки данной статьи.

Надеюсь статья оказалась полезной, вопросы можно задать в комментариях.

Автор: Tmin10
Комментариев: 2
Добавлено 29 сентября 2012 года в 16:35, автор SeoMaestro:

Привет. Не знаешь как выбрать все расширения для загрузки? $fileTypes = array(\'all xD \');

Добавлено 14 мая 2015 года в 08:22, автор Андрей:

Что-то ошибка вылазит непонятная Warning: move_uploaded_file(Z:/home/localhost/www/uploads/09320c8d99b46efaf7b1b202887f1145.jpg) [function.move-uploaded-file]: failed to open stream: No such file or directory in Z:\home\localhost\www\myphp\uploadify.php on line 27 Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move 'Z:\tmp\php38.tmp' to 'Z:/home/localhost/www/uploads/09320c8d99b46efaf7b1b202887f1145.jpg' in Z:\home\localhost\www\myphp\uploadify.php on line 27 ???????? ????targetFile.jpg А в 31 строке

Имя (обязатено) E-mail (обязательно, не публикуется)
Сайт
capture