Блог saintista

Для загрузки файлов предусмотрен тег (<input type=»file» /> , стандартными средствами его внешний вид особо не изменить.

В современных web приложениях использующих повсеместно ajax он смотрится анахронизмом, и мое мнение — морально устарел.

Конечно же для загрузки файлов на сайт можно использовать flash, но с этой задачей великолепно может справится и JavaScript.

AJAX загрузка позволит легко загрузить несколько файлов без обновления страницы, и использования какие-либо лишних элементов, чтобы показать окно выбора файла. Работает во всех основных браузерах, и, начиная с версии 2.0 не требует какой-либо библиотеки для запуска (хотя использetn некоторые функции jQuer). AJAX Ulpoad не создает лишних переменных в глобальном пространстве имен, так что она совместима с jQuery, Prototypejs, Mootools, JavaScript и другими библиотеками.

Вот тут ajaxupload.3.5.js

Как использовать?

1. Нужно создать кнопку.Можно использовать любой элемент!.

<div id=»upload_button»>Upload</div> <div id=»upload_button»> Добавить </ DIV>

В своем простейшем виде, можно создать его, используя следующий код:

new AjaxUpload('upload_button_id', {action: 'upload.php'});

2. Настройка загрузки AJAX

new AjaxUpload('#upload_button_id', {
  // какому скрипту передавать файлы на загрузку? только на свой домен
  action: 'upload.php',
  // имя файла
  name: 'userfile',
  // дополнительные данные для передачи
  data: {
    example_key1 : 'example_value',
    example_key2 : 'example_value2'
  },
  // авто submit
  autoSubmit: true,
  // формат в котором данные будет ответ от сервера .
  // HTML (text) и XML определяются автоматически .
  // Удобно при использовании  JSON , в таком случае устанавливаем параметр как "json" .
  // Также установите тип ответа (Content-Type) в text/html, иначе это не будет работать в IE6
  responseType: false,
  // отправка файла сразу после выбора
  // удобно использовать если  autoSubmit отключен  
  onChange: function(file, extension){},
  // что произойдет при  начале отправки  файла 
  onSubmit: function(file, extension) {},
  // что выполнить при завершении отправки  файла
  onComplete: function(file, response) {}
});

3. Как разрешить только определенных типов файлов?

new AjaxUpload('#button2', {        
        action: 'upload.php',
        onSubmit : function(file , ext){
        // перечисляем какие типы файлов можно загружать
        //-- также нужно сделать проверку на стороне сервера 
                if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                        // extension is not allowed
                        alert('Error: invalid file extension');
                        // cancel upload
                        return false;
                }
        }
});

Как это все работает?

Плагин создает невидимое поле ввода , и IFRAME. Так что это не совсем AJAX загрузка ).

как видим все довольно тривиально и удобно, единственный минус нет индикатора процесса загрузки

Тэги: ajax, file, input, JavaScript, jQuery, JSON, Mootools, Prototypejs, upload

jQuery ajax в IE7

jQuery древовидное меню

Crop и Resize изображений средствами CodeIgniter

Сбор email Twitter пользователей

jQuery SELECT (jquery-asmselect)

jQuery отслеживаем ввод символа в input (Enter, tab)

WordPress Проблемы с cforms после переноса на другой хостинг

jQuery ajax рейтинг

Очистка поля input типа file (type=»file»)

WordPress подключение JQuery

jQuery png Fix

Печать картинки на странице через js

Запись была опубликована Пятница, августа 14, 2009 в 12:23 в рубрике jQuery, js, Ultimate jQuery. Читать рассылку RSS 2.0. Вы можете оставить комментарий или трэкбек с Вашего сайта.