Загрузка файлов ajax с помощью JQuery.
08 Авг 2009
Наконец то появилось время, и я оформил статью по теме онлайн загрузка файлов на сервер.
Для чего нам это нужно?
Если требуется загрузить не один файл, а много? Причем Flash технологиями пользоваться нельзя, или не хочется? А ждать обновления страницы после загрузки каждого файла, мягко говоря утомительно. Тогда нам на помощь приходит замечательный Ajax и не менее замечательный фреймоворк Jquery.
Для реализации задуманного, нам понадобятся 2 библиотеки JQuery
Скачать :
jquery.js
ajaxupload.js
Сразу же пример.
Естественно в нем я не загружаю файлы к себе на сервер. Загрузку имитирую функцией
sleep("3");
Ну собственно код.
index.html
<html>
<head>
<title>Загрузка файлов Ajax с помощью Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxupload.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="uploadButton" class="button">
<font>Загрузить</font>
<img id="load" src="loadstop.gif"/>
</div>
<ol id="files">
Загруженные файлы :
</ol>
</body>
</html>
<head>
<title>Загрузка файлов Ajax с помощью Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxupload.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="uploadButton" class="button">
<font>Загрузить</font>
<img id="load" src="loadstop.gif"/>
</div>
<ol id="files">
Загруженные файлы :
</ol>
</body>
</html>
script.js
$(document).ready(function() {
var button = $('#uploadButton'), interval;
$.ajax_upload(button, {
action : 'upload.php',
name : 'myfile',
onSubmit : function(file, ext) {
// показываем картинку загрузки файла
$("img#load").attr("src", "load.gif");
$("#uploadButton font").text('Загрузка');
/*
* Выключаем кнопку на время загрузки файла
*/
this.disable();
},
onComplete : function(file, response) {
// убираем картинку загрузки файла
$("img#load").attr("src", "loadstop.gif");
$("#uploadButton font").text('Загрузить');
// снова включаем кнопку
this.enable();
// показываем что файл загружен
$("<li>" + file + "</li>").appendTo("#files");
}
});
});
var button = $('#uploadButton'), interval;
$.ajax_upload(button, {
action : 'upload.php',
name : 'myfile',
onSubmit : function(file, ext) {
// показываем картинку загрузки файла
$("img#load").attr("src", "load.gif");
$("#uploadButton font").text('Загрузка');
/*
* Выключаем кнопку на время загрузки файла
*/
this.disable();
},
onComplete : function(file, response) {
// убираем картинку загрузки файла
$("img#load").attr("src", "loadstop.gif");
$("#uploadButton font").text('Загрузить');
// снова включаем кнопку
this.enable();
// показываем что файл загружен
$("<li>" + file + "</li>").appendTo("#files");
}
});
});
upload.php
$uploaddir = 'files/';
$uploadfile = $uploaddir.basename($_FILES['myfile']['name']);
move_uploaded_file($_FILES['myfile']['tmp_name'], $uploadfile)
$uploadfile = $uploaddir.basename($_FILES['myfile']['name']);
move_uploaded_file($_FILES['myfile']['tmp_name'], $uploadfile)
Ну собственно и все. Все достаточно просто и незаурядно.
Пример в опере не работает)
Врешь =), Все работает и даже в IE работает.
Какая Версия Оперы?
Пытаюсь этим скриптом загрузить файл размером 20Мб.
Скрипт пишет – загружено, но в папке файл не появляется…
Всю голову сломал…
А вы в php.ini указали максимально допустимый размер закачки файла и передачи POST запроса?
Какие у вас там параметры?
@professor
Через скрипт я указал:
ini_set(‘memory_limit’, ’1024M’);
set_time_limit(’1200′);
ini_set(“max_execution_time”, “1000000″);
ini_set(“upload_max_filesize”, “512M”);
И все равно никак…
А можно вообще как-то сделать, что-бы помимо
Загруженные файлы :
Route_end.wav
еще отображалось содержимое страницы upload.php?
В каком смысле отображалось содержимое страницы?
Не совсем понимаю что вы хотите.
Я попробовал, у меня файлы ваше 30Мб нормально загружаются.
Скиньте мне на почту то что вы сделали(если это возможно), я попробую решить проблему.
По первому вопросу все решилось…. А вот это все еще интересует, по поводу вывода аплоад.пхп
Ну например выдал upload.php текст по окончании выполнения, и вот как раз этот текст вывести под названием загруженного файла главной страницы…
А может по асе? :) семь 9 три 9 восемь четыре 8
в данном варианте исполнения, этого нельзя сделать. сегодня-завтра посмотрю, и вам в асю напишу.
Спасибо ОГРОМНОЕ!!!
использую модальную форму jqueryui. там у кнопок нет id (они задаются через параметры диалога)
buttons:{
"Добавить":function(){addFoto();$(this).dialog('close');},
"Отменить":function(){$(this).dialog('close');}
}
});
как быть?
Привет !
Использую, приспособил – нравится ! :)
Решите пожаста 2 задачки и вам, как и загрузчику не будет равных :
1. как проверять размер загружаемого файла не ПОСЛЕ а ДО(!!!) загрузки на сервер;
2. немного не к месту, но может подскажете…я сделал после загрузки отображение на названия файла, а саму обработанную картинку. Всё бы ничего, но если jpg НЕДОГРУЖЕН (вобщем как-то испорчен), то вместо картинки появляется смачное warning с путями и названиями :). Ошибка в функции imgcreatefromjpg. Как сего грустного факта можно избежать ?
Надеюсь на ответ ! Заранее спасибо…
Привет. Интересные задачки как и у выше отписавшихся.
К сожалению пока не в состоянии заняться решением ваших задач. Но обязательно займусь этими вопросами как только появится свободное время.
Доброго… !
Вчера с перепугу решил 2-ую – стыд и позор, раньше недопер поставить @ перед ф-цией. :)
Осталось главное. Помогите с определением размера файла без его загрузки на сервак, и я пропиарю ваш блог на своем сайте !
Это последний на сегодняшний день “косякъ” в функционале, а все остальные “гуру-программеры” кроме как поглумиться и потупить более оказались ни на что не способные. Так что вся надёжа на вас… :)
Отписался вам на почту. Стучите в аську.
Отвечаю по порядку:
Константин
Содержимое страницы находится в переменной response
Magnum79
upload.php
if($_FILES["myfile"]["size"]<1000)
{
$uploadfile = $uploaddir.basename($_FILES['myfile']['name']);
move_uploaded_file($_FILES['myfile']['tmp_name'], $uploadfile)}
Здравствуйте, возможно ли сделать загрузку не с компьютера пользователя, а вписав url файла на другом сервере? т.е. грубо говоря, чтобы у нас было не input type=file, а типа input type=text и этот введенный текст отсылался бы обработчику
Спасибо автору, нужно было срочно реализовать подобную загрузку :)
Не поскажете как сделать чтобы можно было выбирать только jpg файлы
И еще скажите пожалуйста как выдать сообщение об ошибке например, при неудачной загрузке файла. Или если был выбран файл слишком большого размера. И как сделать чтобы например выдал upload.php текст по окончании выполнения, и вот как раз этот текст вывести под названием загруженного файла. Если можно ответ в комментах или на почту.
Igor пожалуйста.
Evgen
1) проверка на jpg.
Проверять нужно по расширению. Можно и по типу фала, но каждый браузер передает разный тип одного и того же файла.
тип можно смотреть в этой переменной $_FILES["myfile"]["type"]
upload.php
в JS ответ будет присвоен переменной response
P.S. Писал в браузере, так как нет возможности протестировать. Если что то не будет работать спрашивайте.
Спасибо большое за ответ, только в данном примере, допустим, если первый файл загрузился удачно upload.php вернул ответ и поставил его в контейнер 1, а сели ошибка, то ответ должен встать в контейнер 2. Т.к. некарасиво получается допустим вернулся удачный ответ в виде картинки потом в этот же контейнер вернулась ошибка и все это висит
Блин, пардон все элементарно! Вот вдруг кому нибудь пригодится:
И еще приделать бы сюда удаление ошибочно загруженых файлов вообще цены бы не было!
Ну удаление ошибочных файлов, это уже совсем другой разговор.
=)
Как время будет, напишу
Неизвестная аномалия в IE7 при наведении на загрузку под курсором почемуто возникает белый прямоукольник и перемещается за курсором в пределах этого контейнера
А как можно передать каки-нибудь дополнительные параметры в обрабатывающий скрипт upload.php и как их там можно извлечь? )
А можно поинтересоваться зачем? Просто интересно где это требуется?
Сегодня-завтра посмотрю и сообщу тут.
На самом то деле параметры передать очень легко, по средствам GET=)
Спасибо) но я уже для передачи доп параметров использовала атрибут data, по-моему он для этого сюда специально и включен:
$.ajax_upload(button, {
data : {param:’1′},
А параметры мне необходимы для того чтобы данные о загруженных файлах записывать в БД ))
Привет! Спасибо, заработало с первого раза, вещь! Сэкономило кучу времени и нервов! А как избавиться от белого прямоугольника, который поверх всего слева выплывает, может кто уже решил?
Ну во первых перестать пользоваться IE =)
А во вторых, можно в качестве кнопки загрузки не использовать div
тоесть вместо этого
<font>Загрузить</font>
<img id="load" src="loadstop.gif"/>
</div>
написать нечто такое
<input type="button" id="uploadButton" value="Загрузить">
<img id="load" src="loadstop.gif"/>
</div>
Ну или что то в этом роде. Тут можно поэксперементировать.
Здравствуйте!
А можно ли как то запретить выполнение этой функции в зависимости от заполнения другого поля? т.е. если то поле пустое – запретить нажатие на кнопку – и появление сообщения, и появление окна загрузки только если то поле не пустое?
А как можно передать параметры, которые заранее неопределены, а зависят от действия пользователя?
Пожалуйста подскажите:
что если много разных полей с разными id, а ваш пример сделан под одну кнопку загрузки, тоесть:
загрузить
загрузить
если нужно загружать много разных картинок, а скрипт берет только uploadButton, как бы передать параметры. Если вставить несколько кнопок на странице, жмется только первая, остальные не видит.
Не могу загрузить файлик на 300мб.
Верху говарилось про php.ini как и куда добавить критерий на размер файла
В php.ini нужно у
upload_max_filesize
поставить нужный максимальный размер
upload_max_filesize = 600M
Несмотря на выставленный параметр:
name : ‘C:\\Users\\Diana\\Documents\\Материалы\\HTA\\work\\inv\\User.inf’,
выходит запрос от windows “Выбор файла на выгрузку”.
Что посоветуете?
Хотелось бы отправить файл молча.
С уважением KVP.
Такая проблема. мне нужно несколько раз использовать данную функцию. Т.е.
[form]
[download1]
[download2]
[download3]
[/form]
Как организовать так, чтобы при нажатии на download1..download3 механизм работал, и чтобы скрипт запускать в виде функции типа
к примеру
UploadFunction(download1,’jpg|gif’,param2);
UploadFunction(download2,param1,param2);
UploadFunction(download3,param1,param2);
Доброго времени суток! Неплохая статья )))
Но как говорится нужно жить в ногу со временем ))
Сейчас на сайте автора доступна новая версия плагина http://valums.com/ajax-upload/
Все отлично работает, даже показывается размер загружаемого файла, но не могу разобраться как поменять надпись по умолчанию (Upload a file) на допустим (Загрузить картинку), вернее в самом плагине поменять не проблема, но у меня на сайте подобных кнопок много )) (загрузить фото, загрузить картинку, загрузить видео). Поэтому возникла проблема (((((((
Как задать в этом плагине надпись для кнопки??? Подскажите пожалуйста )))
Я так понимаю автором это не реализовано ((( Отсюда вижу только один выход – нужно усовершенствовать сам плагин, добавив в него входящий параметр допустим (nameButton), но как это сделать безболезненно не хватает знаний ((( Подскажите пожалуйста умные люди ))))
Приведенный вами пример позволяет загружать сразу несколько картинок, а это говорит об использовании технологии Flash.
Методика описанная в данной статье в корне отличается от приведенной вами.
Вам будет интересна другая моя статья http://n-professor.ru/massovaya-zagruzka-fajlov-na-server-pri-pomoshhi-flash.html
@ professor
Спасибо за подсказку, но данное решение мне не подходит, да и не хочется использовать флеш.
Поближе познакомился с данной статьей, переварил немножко скрипт, кое что подправил под себя )))
В принципе получилось довольно симпатично )))
Подскажите только, как вывести на страницу (допустим рядом с
// показываем что файл загружен
$(“” + file + “”).appendTo(“#files”);) данные с php обработчика.
У меня в о обработчике происходит довольно много операций с картинкой (это и наложение водяного знака, создание превьюшки, запись в mysql и пр.) то есть большая вероятность закончить загрузку ошибкой ((((
Как довести данную полезную информацию до пользователя?
я имею ввиду, закончились ли все махинации с файлом успехом или произошли некоторые ошибки!
Просто JS ответа вроде
// показываем что файл загружен
$(”” + file + “”).appendTo(”#files”);) данные с php обработчика.
на мой взгляд недостаточно ((((
при возникновении ошибки выводите ее на экрен
echo “Тут произошла ошибка”;
Эта строчка доступна в функции
onComplete : function(file, response) {}
В переменной response
То есть можно вывести допустим через alert
@ professor
Спасибо ))) Очень помог )))
С Php то я на ‘ты’, там проблем нет )), а вот c js, пока не очень ))) недавно изучаю.
@ iF
Все идеи реализованы ))) Спасибо еще раз!!!
Здравствуйте.
Похожий вопрос уже был.
Спрошу еще раз…
На странице 6 полей для загрузки фото.
У каждого поля свое name.
Как сделать чтобы этот скрипт работал для каждого поля в отдельности и в php передавались соответствующие названия форм?
Если честно то я не знаю.
По моему единственный выход это дублирование кода.
var button1 = $(‘#uploadButton1′), interval;
var button2 = $(‘#uploadButton2′), interval;
$.ajax_upload(button1, …
$.ajax_upload(button2, …
На самом деле это и логично, ведь у каждой формы свои параметры загрузки, свои настройки
Подскажите плз, а как реализовать к этому примеру прелоадер с процентом загрузки?
Спасибо, сам метод оч удобный в использовании)
По этому принципу так сделать нельзя. Ну во всяком случае я не знаю как.
http://valums.com/ajax-upload/
А что можете по этому примеру сказать?
Интересный пример.
На сколько я знаю, раньше для массовой загрузки файлов необходим был FLASH. Здесь он не используется. Впечатляет.
Интересно, работает ли в IE?
Спасибо за наводку. Обязательно попробую в своих проектах.