Загрузка файлов 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)
Ну собственно и все. Все достаточно просто и незаурядно.
Спасибо!
Похоже где-то ограничение файлы больше 2 mb не грузит.. ((
Где-то ограничение прописано?
Благодарю. Извиняюсь.. Уже нашел ранее в комментах.
Новый вопрос: “А можно ли как-то ограничить количество загружаемых файлов, т.е. к примеру после 4 файлов больше файлы не загружаются или пишется, что всё..”
ограничение 2M обычно в php.ini прописано…
Пример упорно не работает. Судя по поведению, проблема в моем сервере, а именно в разрешении на запись.
В php.ini прописал:
file_uploads=On
upload_max_filesize=2M
апач ребутнул – не помогло.
Может есть какие идеи?
Вопрос снят. Это же линух – на папку files забыл три семерки поставить
:)
Приветствую!
очень полезная статейка, но! есть вопрос:
как передать новое имя файла для сохранения из index.php в upload.php через script.js? долго думал, ничего не придумалось.. помогите :)
Спасибо!
разобрался с именем файла.. только как теперь выполнять загрузку по онклик?
$.ajax_upload(button, {
action : ‘upload.php?param=’+document.getElementById(‘fnewname’).value,
….
}
так оно цепляет изначальное значение, что там не изменяй в этом fnewname – все равно целяется то что там было при загрузке страницы..
Все работает. В upload.php загнал ресайз (для изображений).
Но есть вопрос: есть ли в данном примере возможность анализировать рамзмер отправляемого файла на стороне клиента до отправки? Планирую использовать в нагруженном приложении, на сервере с тарифицируемым трафиком. Гонять файлы, превышающие лимит, лишний раз не хочу. На сколько я заметил, даже если файл превышает лимит, прописанный в php.ini, то он сначала грузится, а потом уже незаписывается.
PS эта задача решается на html5 (включая ресайз на стороне клиента), но тогда теряем кроссбраузерность :(
Такие параметры должны сработать
sizeLimit: 0, // max size
minSizeLimit: 0, // min size
Я тоже очень долго возился з передаваемыми переменными, так ничего не и не смог, он их сохраняет и при изменении отправляет старые… А вот еще кому понадобится, если в файле upload у вас выводятся ошибки и результат загрузуи
onComplete : function(file, response) {
…
$(“#your_id”).html(response);
…