Загрузка файлов в один клик
Хочу рассказать Вам как реализовать загрузку файла в один клик без перезагрузки страницы.
Для реализации без перезагрузки мы воспользуемся моей любимой библиотекой 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.
Incredible, amazing website structure! How long are you currently writing a blog with regard to? you’re making writing a blog appear effortless. The complete search of your site is excellent, plus the articles!…
I just want to tell you that I am very new to blogs and actually enjoyed your web blog. Likely I’m planning to bookmark your site . You certainly have very good posts. Thank you for sharing your blog.
This specific truly clarified our problem, thank you!
The root of your writing whilst appearing reasonable originally, did not settle very well with me personally after some time. Someplace within the sentences you managed to make me a believer but just for a very short while. I nevertheless have a problem with your leaps in assumptions and you would do well to fill in those breaks. When you can accomplish that, I would definitely be impressed.
A unique discussion might be priced at comment. I believe that you should produce more on this specific topic, may well be a taboo topic but frequently people are too few to speak for such topics. To the next. Best wishes
There are some interesting points in time in this article but I don’t know if I see all of them center to heart. There is some validity but I will take hold opinion until I look into it further. Good article , thanks and we want more! Added to FeedBurner as well
Rattling nice pattern and great subject matter, nothing else we need :D.
As I web site owner I believe the content material here is quite superb, thanks for your efforts.
Keep up the great work , I read few content on this site and I think that your site is really interesting and has got circles of wonderful info .
I went over this web site and I believe you have a lot of superb information, saved to my bookmarks (:.