Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по AJAX / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Загрузчик изображений на сервер

При помощи ajax можно сделать много интересных вещей, которые происходят без перезагрузки страницы. Например, добавлять комментарии или загружать файлы на сервер, при этом сразу виден результат. О загрузке файлов на сервер, а точнее изображений мы сегодня и поговорим.

Пример

Для того чтобы сделать такой загрузчик нужно на страницу подключить несколько javascript-ов и таблицу стилей:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script
type="text/javascript" src="js/ajaxupload.3.5.js"></script>
<link
rel="stylesheet" type="text/css" href="./styles.css">

Теперь на страницу нужно поместить скрипт, в котором будет прописан обработчик, и директория, в которую будем загружать. Так же этот скрипт будет выдавать ошибку, если выбрано не изображение:

<script type="text/javascript">
$(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))){
// extension is not allowed
status.text('Поддерживаемые форматы JPG, PNG или GIF');
return false;
}
status.text('Загрузка...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
</script>

Здесь обработчик имеет название upload-file.php, а директория uploadfile. Затем идет проверка на расширения файлов изображений. Так что при желании этот скрипт можно приспособить для загрузки обычных файлов. Сам обработчик имеет довольно простой код:

<?php
$uploaddir = './uploads/';
$file = $uploaddir.basename($_FILES['uploadfile']['name']);

$ext = substr($_FILES['uploadfile']['name'],strpos($_FILES['uploadfile']['name'],
'.'),strlen($_FILES['uploadfile']['name'])-1);
$filetypes = array('.jpg','.gif','.bmp','.png','.JPG','.BMP','.GIF','.PNG','.jpeg','.JPEG');

if(!in_array($ext,$filetypes)){
echo "<p>Данный формат файлов не поддерживается</p>";
}
else{
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error";
}
}
?>

Здесь то и происходит загрузка файла и результат передается нашей странице.
Теперь создадим блок, в котором будет находиться кнопка выбора файлов:

<div id="mainbody">
<!-- Upload Button, use any id you wish-->
<div id="upload"><span>Выбрать файл<span></div><span id="status"></span>

<ul
id="files"></ul>
</div>

А между <ul id="files"></ul> будет отображаться информация о успешном или не удачном выполнении операции. Размеры отображаемого изображения Вы сможете поменять в таблице стилей. Ну вот на этом можно и закончить.

Автор: Евгений Бочкарев Урок добавлен: 15 Августа 2010 в 17:46 Просмотров: 36832

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (47)

#48 tasimski 29-09-2014 в 19:22
а как сделать так чтобы загружалось массово? какой бы код добавить?
#49 виталий 12-11-2014 в 13:22
все хорошо. но как этот объект удалить? нигде не найду.
(если я удаляю кнопку к которой ajaxupload был привязан. потом к другой кнопке привязываю новый загрузчик) или как перепривязать этот загрузчик в другой кнопке.?

new AjaxUpload( создали. Как удалить?(( delete не помогает.
#50 Виталий 12-11-2014 в 15:58
нашел, btnUpload.destroy(); ломает этот объект.
помогла вот такая функция для отображения свойств объекта
function fnShowProps(obj, objName){
var result = "";
for (var i in obj) // обращение к свойствам объекта по индексу
result += objName + "." + i + " = " + obj[i] + "<br /> ";
document.write(result);
}
$(function(){
var btnUpload= AjaxUpload(btnUpload, {......}
fnShowProps(btnUpload);
}
#51 Мурад 08-12-2015 в 09:50
Коряво этот скрипт работает, попробуй загрузить две фотки с одинаковыми названиями, на выходе окажется что там две первые отображаются. Как динамически меняющиеся сделать?
#52 tasimski 11-12-2015 в 02:15
я думаю вот так image.jpg?random9999
#53 semob 13-01-2016 в 11:43
Спс за пример.
#54 serega koval 24-04-2016 в 16:51
скачаный архив на сервере не работает,пишет ошибка загрузки
#55 Виталий 15-05-2016 в 17:46
Все таки вопрос про мультизагрузку остался...
#56 Виталий 15-05-2016 в 17:47
Вопрос даже больше про мульти загрузку со стороны jquery, на php примерно ясно как сделать.
#57 diadya-yar@yandex.ru 20-09-2016 в 12:26
Жаль, что только маленькие файлы тянет, есть пример с использованием FTP для загрузки картинок?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки