Простой кросс-браузер, загрузка файла jQuery/PHP с индикатором выполнения

Я знаю, что об этом есть несколько тем, но ни один из них не предложил определенного решения для файлового загрузчика script, который:

  • Работает на IE7 +
  • Имеет индикатор выполнения (в каждом браузере)
  • Нет Flash (или резервного копирования)

Любые решения?

ОТВЕТЫ

Ответ 1

Вы можете использовать Axuploader от AlbanX. Он получил:

  • Загрузка нескольких файлов во все браузеры
  • Выбор нескольких файлов в браузерах html5 (не в IE)
  • Загрузить информацию о ходе работы в браузерах html5
  • Информация о размере файла в браузерах html5
  • Нет Flash, Silverlight, других плагинов, только JavaScript
  • Поддержка IE 6+, Firefox 2+, Safari 2+, Chrome 1 +
  • Загрузка файлов с помощью куска, для большей производительности
  • Не зависит от размера максимального размера сервера и максимальных ограничений размера загружаемого файла.

Вы также можете попробовать Fine-Uploader от Widen. Он получил:

  • Выбор нескольких файлов, индикатор выполнения в FF, Chrome и Safari.
  • Перетаскивание файла в FF, Chrome и Safari (OS X)
  • Отгрузки отменены
  • Никаких внешних зависимостей при использовании FineUploader или FineUploaderBasic. Разумеется, при использовании необязательной обертки jQuery требуется jQuery.
  • Для FineUploaderBasic требуется только связанный файл javascript. Все файлы и файлы изображений Fine Uploader могут быть опущены.
  • Не использует Flash
  • Полностью работает с HTTPS
  • Протестировано в IE7 +, Firefox, Safari (OS X), Chrome, IOS6 и различных версиях Android. IE10 теперь также поддерживается!
  • Возможность отправки файлов сразу после их выбора или "очереди" для загрузки по запросу пользователя
  • Отображать конкретные сообщения об ошибках с сервера при сбое при загрузке (наведите указатель мыши на неактивный элемент загрузки)
  • Возможность автоматического повторного загрузки неудачных загрузок
  • Возможность разрешить пользователям повторить попытку неудачной загрузки вручную.
  • Создайте свой собственный валидатор файлов и/или используйте некоторые валидаторы по умолчанию, включая Fine Uploader
  • Получение обратного вызова на разных этапах процесса загрузки.
  • Отправить любые параметры на стороне сервера вместе с каждым файлом.
  • Загрузка каталогов с помощью перетаскивания (Chrome 21 +).
  • Включить параметры в строку запроса ИЛИ тело запроса.
  • Отправить файлы для загрузки через API.
  • Разделить файл на несколько запросов (файлообмен/разделение).
  • Возобновление неудачной/прекращенной загрузки с предыдущих сеансов
  • Удалить загруженные файлы
  • Поддержка CORS
  • Загрузите любые объекты Blob через API.
  • Легко установить и применить максимальный предел.
  • Загрузка изображений через вставку (Chrome).
  • Автономный модуль перетаскивания файлов и папок. Интегрировано по умолчанию в режим FineUploader.
  • Выполнять async (неблокирующие) задачи в обратных вызовах, которые влияют на связанный файл или файлы.
  • Загрузка изображений непосредственно с камеры мобильного устройства.
  • Получить статистику для загруженных файлов и получить обратные вызовы изменений статуса
  • И еще много!

Или плагин jQuery-File-Upload (совместимый с IE):

  • Загрузка нескольких файлов: Позволяет одновременно выбирать несколько файлов и загружать их одновременно.
  • Поддержка перетаскивания: Позволяет загружать файлы, перетаскивая их со своего рабочего стола или файлового менеджера и отбрасывая их в окне браузера.
  • Загрузите индикатор выполнения: Показывает индикатор выполнения, показывающий ход загрузки для отдельных файлов и для всех загружаемых файлов.
  • Отменные загрузки: Индивидуальные загрузки файлов можно отменить, чтобы остановить процесс загрузки.
  • Возобновляемые загрузки: Отмененные загрузки можно возобновить с помощью браузеров, поддерживающих API Blob.
  • Загруженные фрагменты: Большие файлы можно загружать в более мелкие куски с помощью браузеров, поддерживающих API Blob.
  • Изменение размера изображения на стороне клиента: Изображения могут быть автоматически изменены на стороне клиента с помощью браузеров, поддерживающих требуемые API-интерфейсы JS.
  • Предварительный просмотр изображений: Предварительный просмотр файлов изображений может отображаться перед загрузкой в ​​браузерах, поддерживающих требуемые API-интерфейсы JS.
  • Никаких плагинов для браузера (например, Adobe Flash) не требуется: Реализация основана на открытых стандартах, таких как HTML5 и JavaScript, и не требует дополнительных плагинов для браузера.
  • Изящный откат для устаревших браузеров: Загружает файлы через XMLHttpRequests, если поддерживается, и использует iframe как резерв для устаревших браузеров.
  • Форма загрузки файла HTML: Показывает стандартную форму отправки HTML файла, если JavaScript отключен.
  • Загрузка файлов с несколькими сайтами: Поддерживает загрузку файлов в другой домен с помощью XMLHttpRequests на разных сайтах.
  • Несколько экземпляров плагина: Позволяет использовать несколько экземпляров плагина на одной и той же веб-странице.
  • Настраиваемый и расширяемый: Предоставляет API для установки отдельных параметров и определения методов callBack для различных событий загрузки.
  • Загрузка многостраничных файлов и файлов: Файлы могут быть загружены как стандартные "multipart/form-data" или поток содержимого файла (загрузка HTTP PUT файла).
  • Совместимость с любой серверной платформой приложений: Работает с любой серверной платформой (PHP, Python, Ruby on Rails, Java, Node.js, Go и т.д.), Которая поддерживает стандартные загрузки файлов в формате HTML.

* UPDATE

Отъезд 10 Загрузка файла HTML5 с помощью примера jQuery, чтобы увидеть отличные загрузчики файлов, которые работают с HTML5

Кроме того, здесь, в 10+ PHP Ajax Upload File Tutorials - Бесплатная загрузка, вы можете выбрать из множества закачивающие.

Надеюсь, что это поможет.

Ответ 3

Используйте это:

http://valums.com/ajax-upload/

Нет Flash, Простой JQuery.

Функции

  • выбор нескольких файлов, индикатор выполнения в FF, Chrome, Safari
  • файл перетаскивания в FF, Chrome
  • загрузка отменена.
  • нет внешних зависимостей
  • не использует Flash
  • полностью работает с https
  • поддержка клавиатуры в FF, Chrome, Safari
  • проверен в IE7,8; Firefox 3,3,6,4; Safari4,5; Хром; Opera10.60;

git: https://github.com/valums/file-uploader

Вы также можете использовать их:

http://nixboxdesigns.com/demos/jquery-uploadprogress.php

https://github.com/drogus/jquery-upload-progress

http://www.albanx.com/

Индикатор выполнения Flash-less IE

http://www.webappers.com/2011/01/24/jquery-file-upload-with-upload-progress-bar/

Надеюсь, что это поможет.

Ответ 4

http://www.plupload.com/ доступен в нескольких режимах работы и имеет изящное ухудшение. Если поддерживается HTML5, он также может выполнять перетаскивание и пересылку.

Ответ 5

Для поддержки индикатора выполнения и для загрузки нескольких файлов в IE требуется Flash. К сожалению, ни один из новых, "ярких, но бесперспективных" виджетов не поддерживает это.

Единственное найденное мной решение - Uploadify, что не идеально, но делает работу. Самый большой откат - отсутствие поддержки перетаскивания.

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