One-Click Upload – это плагин для jQuery, который способен заменить стандартный элемент формы для аплоада файлов, причем для этой цели можно использовать ссылки, изображения или любой другой элемент. После инициализации выбранного элемента, по нажатию на него будет отображаться диалог выбора файлов, а сама загрузка файла на сервер будет происходить без перезагрузки страницы. Используя этот плагин вы сможете настроить внешний вид элементов для загрузки файлов так, как вам нужно, в отличие от стандартного поля для загрузки файлов, вид которых крайне трудно изменить (см. пример здесь).
Однако основным недостатком остается тот факт, что в отличии от стандартных полей, плагин не предоставляет текстового поля, в котором отображается путь к выбранному файлу.
Пример
Для создания поля, воспользуемся простой ссылкой, а прогресс отправки файла будем показывать в элементе span=progress:
<a id="upload1" style="background: green; font-size: 24px; color: white;" href="#">Выберите файл</a> <span id="progress1"></span>
Далее инициализируем поле (определяем его по id):
$('#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";
}
?>
Более подробно о плагине можно узнать на странице проекта Google Code.
