Загрузка файлов в один клик
Хочу рассказать Вам как реализовать загрузку файла в один клик без перезагрузки страницы.
Для реализации без перезагрузки мы воспользуемся моей любимой библиотекой jQuery, а также плагином к нему, с говорящим названием «One-Click Upload».
Для начала создадим кнопку для загрузки файла(upload1) и блок для отображения статуса(progress1).
<a id="upload1" href="#">Загрузите файл</a>
<span id="progress1"></span>Теперь подключим к странице библиотеки jQuery и One-Click Upload.
После этого займемся настройкой загрузки.
$('#upload1').upload({
name: 'file',
method: 'post',
enctype: 'multipart/form-data',
action: 'upload.php',
onSubmit: function() {
$('#progress1').text('Загрузка файла...');
},
onComplete: function(data) {
$('#progress1').text('Файл успешно загружен!');
}
});Теперь нам нужен обработчик самих файлов на php, вот простейший.
<?php
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
echo "File is valid, and was successfully uploaded.n";
} else {
echo "Possible file upload attack!n";
}
?>Более расширенную документацию по данному плагину вы можете посмотреть на его страничке, ссылки прилагаются.
Вот и всё. Сегодня как-то кратко получилось, голова жутко болит, доступно хоть написал?
Кратко, но ясно. Спасибо, мне это как раз нужно!
А ещё буду наглым и спрошу. Не знаете ли Вы какой-нибудь скрипт для отрисовки полосок статуса. Пример. Использовано 23% из 100% и это нужно отобразить в виде полосочки. Еще пример. Использовано 13%, зарезервировано ещё 20% и осталось, соответственно, 77% и это тоже нужно графически и в разных цветах показать.
Как-то уже писал о подобном —
Спасибо.
Доступно =)
Интересная штука
У меня не работает. Пример в Опере не пашет.
Можно поподробнее чуть?
upd: Разобрался — проблема с версией jQuery.js. Была предыдущая, а с ней не работает.
А ещё есть ajaxForm
$(‘#file_form’).ajaxForm({
dataType: ‘html’,
success: function(feedback) {
$(‘#frm_file_insert [name="filename"]‘).attr(‘value’, »);
}
});
не совсем так, что бы показывать состояние загрузки файла надо переодически получать обратно размер того, что окажеться в $_FILES['file']['tmp_name'] после полной загрузки. Насколько я знаю без cgi такое сделать не выйдет.
А как быть если вместе с файло надо еще передать данные? например id сессии… о_О
Нашел документацию, разобрался :)
Как насчёт готового примера?
А через flash не пробовали?
Готовый пример на сайте автора!
Пробывал. Правда давно, насколько я знаю недавно они что-то исправляли в безопасности, и как раз загрузки файлов это касалось. Так что про сегодня ничего не могу сказать.
Пример на сайте автора сообщает о успешной загрузке даже если ничего не загружалось.
По этой же теме. Кто-то сталкивался с загрузкой большого количества файлов. Есть ли «легальные» способ без использования хаков, своего для каждого браузера?
Просмотрев исходники могу сказать что скрипт злокачественнее, чем я думал. Раньше когда браузеры еще не поддерживали объект xmlhttp (на котором построен так называемый аякс) программисты нашли способ отправлять данные без перезагрузки другим способом:
создавался скрытый фрейм, в котором была форма. после её манипуляции с js она свободно отправлялась (сабмитилась) и сервер выдавал результат и так как это все происходило во фрейме, а основная страница была не тронута, то просто брался этот результат и использовался дальше.
тут тоже самое: создаеться скрытый фрейм с формой. ждал большего от этого плагина.
Спасибо за плагин
Чет не вьехал, бред какой-то. Если поставить прямую ссылку на файл. А потом кликнуть на нее, то разве страница перезагружается? Браузер сразу открывает окно сохранения, а страница не перезагружается
А, теперь вьехал. Говорила мне мама, читай до конца, а я начало прочел и сразу в коменты полез…
Великолепная статья/стати, великолепный сайт (дизайн супер!)
Отключу на вашем сайте AdBlok(рекоммендованный вами в последней статье :)), и буду кликать по рекламе, да бы у Вас еще больше было желания писать хорошие статьи :)
Николай где вы нашли документацию я толком разобратся не могу, мож я ламер не спорю но помогите…
а знает кто, как остановить процесс после или до выбора файла?
Мне надо при определенных условиях не давать загружаться файлу
Вот если бы как на фликре… :)
P.S. Что-то с вашим блогом не так.. Поиск не ищет, комментарии не оставляются (до тех пор пока не почистил куки, сайт упорно не понимал почему же я не указываю свое имя и почту)
Антон, насколько я знаю, с файлами по другому никак не сделаешь – только через iframe.
Всё сделал как сдесь описано а не пашит(
Очень интересное решение. Но как выдернуть ссылку из php скрипта в js?
Хотелось бы, чтобы после успешной загрузки картинки (частный случай) js возвращал ссылку на нее. Уже больше дня мучаюсь, но не могу разобраться. Если расскажите как – отблагодарю ;)
У меня в Opera 9.64 не работает (не появляется окно для выбора файла) . Версия ocupload-1.1.2 , jquery-1.2.6. Пробовал и с более новой jquery-1.3.2 – все равно не работает. Хотя на сайте автора все нормально – всплывает окно для выбора загружаемого файла.
В мозилле все отлично…
Кто-то сталкивался с таким? И есть ли альтернативы?
Вы не пробовали загружать несколько файлов. Реализация как на mail
Возможно ли перехватить размер файла до загрузки?
у меня тоже не работает в мозиле
и у меня не работает. автор отстойник
автор нормальный, это просто руки кривые у некоторых. Читайте внимательно.
Не знаю кто отстойник, кто нет, но у меня тоже не работает с jquery-1.3.2.min.js в мазиле…
Хотелось бы понять почему…
$(‘#upload1′).upload({
name: ‘file’,
method: ‘post’,
enctype: ‘multipart/form-data’,
action: ‘upload.php’,
onSubmit: function() {
$(‘#progress1′).text(‘Загрузка файла…’);
},
onComplete: function(data) {
$(‘#progress1′).text(‘Файл успешно загружен!’);
}
});
хм…
Автор подскажите где слажал? Не я первый, не я последний :)
Тоже не получается что-то… Ошибок нет, но при щелчке на элементе на который вешаем метод .upload() ничего не происходит.
Страница с примером автора не работает, чтобы посмотреть его исходный код. Может быть вы сделаете рабочий пример, чтобы можно было посмотреть в код?
Вот что по демо-ссылке:
The requested page couldn’t be found.
Есть и подводные камешки. Если использовать параметры, которые можно вводить в плагине, то он в форму отправки добавляет скрытые теги для их формирования. Это понятно и это правильно. Но неправильно то, что они не удаляются автоматом, а накапливаются… например если у вас 10 отправок по 5 параметров то в форме в конце появятся скрытые 50 тегов… А это ой как нехорошо…
>>The requested page couldn’t be found.
И как же тогда посмотреть Demo и скачать этот плагин?
Buildings are quite expensive and not everyone is able to buy it. But, are invented to aid different people in such kind of hard situations.