Компонент загрузки файла WebUploader может полностью использовать преимущества HTML5 в современных браузерах, а не оставлять основные браузеры IE, используя исходное время выполнения Flash и совместим с IE6+, iOS 6+, Android 4+. Два набора времени выполнения, один и тот же метод вызова может быть выбран пользователями по желанию. Использование большей фрагментации файлов одновременная загрузка значительно повышает эффективность загрузки файлов.
1. Введение функции
Шардинг, параллелизм
Шардинг и параллелизм объединяются, чтобы разделить большой файл на несколько блоков и загружать одновременно, значительно улучшая скорость загрузки больших файлов.
Когда проблемы сети вызывают ошибки передачи, вам нужно только повторно повторно передает осколок ошибки, а не весь файл. Кроме того, передача Shard может отслеживать прогресс загрузки в режиме реального времени.
Предварительный просмотр, сжатие
Поддерживает общие форматы изображений JPG, JPEG, GIF, BMP, PNG Предварительный просмотр и сжатие для сохранения передачи сетевых данных.
Проанализируйте мета -информацию в JPEG и правильно обрабатывайте различные ориентации. В то же время, после сжатия, загрузите и сохраните все исходные метаданные изображения.
Добавить файлы по нескольким каналам
Поддерживает несколько файлов, введите фильтрацию, перетаскивание (файл и папка) и функции вставки изображений.
Функция вставки в основном отражается в том факте, что при наличии данных изображения в буфере обмена (инструменты экрана, такие как QQ (Ctrl + Alt + A), щелкните правой кнопкой мыши изображение на веб-странице и нажмите Copy), Ctrl + V может добавить этот файл изображения.
HTML5 & Flash
Совместим с основными браузерами, последовательными интерфейсами и реализует два набора поддержки времени выполнения, поэтому пользователям не нужно заботиться о том, какие ядра используются внутри.
В то же время, флэш-часть не выполняет никаких работ, связанных с пользовательским интерфейсом, что удобно для пользователей, которым не заботятся о расширении и индивидуальных потребностях бизнеса Flash.
MD5 Seconds Pass
Когда размер файла велик, а количество относительно большое, он поддерживает проверку значения MD5 File до загрузки. Если это последовательно, вы можете пропустить его напрямую.
Если сервер и фронт-конечности равномерно изменяют алгоритм и взять сегмент MD5, он может значительно улучшить производительность проверки и занять около 20 мс.
Легко расширять и съемный
Съемный механизм принят для разделения функций на виджеты и может быть совпадает свободно.
Код организован с использованием спецификаций AMD, что является ясным и ясным, что делает его удобным для расширения игроков.
Ввести ресурсы
Загрузка файлов с использованием веб -загрузчика требует введения трех ресурсов: JS, CSS и SWF.
<!-Представление CSS-> <link rel = "styleSheet" type = "text/css" href = "WebUploader Polder/webUploader.css"> <!-Представление JS-> <Script Type = "Text/Javascript" SRC = "SWFALARDER POLPER/WEBUPLOARDERALER. будет отображаться позже->
2. Загрузка файла
WebUploader только содержит базовую реализацию загрузки файлов и не включает в себя часть пользовательского интерфейса. Поэтому вы можете свободно играть в интерактивные аспекты. Следующее продемонстрирует, как реализовать простую версию.
HTML Part
Во -первых, подготовьте структуру DOM, включая три части: контейнеры, которые хранят информацию о файле, кнопки выбора и кнопки загрузки.
<div id = "uploader"> <!-используется для хранения информации о файле-> <div id = "thelist"> </div> <div> <div id = "picker"> select file </div> <button id = "ctlbtn"> запуск загрузки </button> </div> </div>
Инициализировать загрузчик Интернета
Для получения подробной информации, пожалуйста, посмотрите на раздел комментариев в коде.
var uploader = WebUploader.create({ // swf file path swf: BASE_URL + '/js/Uploader.swf', // File reception server. server: 'http://webuploader.duapp.com/server/fileupload.php', // Select the file button. Optional. // Create internally according to the current run, which may be an input element or Flash Pick: '#picker', // Сжатие изображений, по умолчанию, если это JPEG, он сжимает и загрузит его снова перед загрузкой!Показать выбор пользователя
Поскольку WebUploader не обрабатывает логику пользовательского интерфейса, необходимо прослушать событие FileQueed для его реализации.
// Когда файл добавляется в queue uploader.on ('filequed', function (file) {$ list.append ('<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> ждать загрузки ... </p>' + '</div>');Загрузить файл. Загрузить прогресс
Когда файл будет загружен, веб -загрузка будет отправлять событие uploadprogress, которое содержит объект файла и текущий ход загрузки файла.
// Создать панель прогресса для отображения в режиме реального времени во время загрузки файлов. uploader.on ('uploadprogress', function (file, процент) {var $ li = $ ('#' + file.id), $ процент = $ li.find ('. Progress .progress-bar'); // Избегайте повторного создания if (! $ процент. '</div>'). Appendto ($ li) .find ('.Успех файлов и обработка сбоев
Если загрузка файла не выполняется, событие uploadError будет отправлено, и если файл будет успешно загружен, событие uploadSuccess будет отправлено. Независимо от успеха или сбоя, событие uploadcomplete будет запускается после загрузки файла.
uploader.on ('uploadsuccess', function (file) {$ ('#'+file.id) .find ('p.state'). Text ('uploaded');}); uploader.on ('uploadError', function (file) {$ ('#'+file.id) .find ('p.state'). 'uploadcomplete', function (file) {$ ('#'+file.id) .find ('. progress'). fadeout ();});3. Загрузите изображения
По сравнению с обычной загрузкой файлов, эта демонстрация демонстрирует: фильтрация файлов, предварительный просмотр изображения, загрузка сжатия изображения и другие функции.
HTML
Чтобы реализовать демонстрацию, как указано выше, вам сначала необходимо подготовить кнопку и контейнер для хранения добавленного списка информации о файлах.
<!-Dom Structure Part-> <div id = "uploader-demo"> <!-используется для хранения элемента-> <div id = "filelist"> </div> <div id = "filepicker"> выберите изображения </div> </div>
JavaScript
Создать экземпляр Web Roaderer
// Инициализировать Web uploaderVar uploader = webUploader.create ({// загружать ли автоматически после выбора файла. Auto: true, // swf -файл pail swf: base_url + '/js/uploader.swf', // file resption server. Выберите кнопку «Файл».Слушайте событие FileQueed и создайте предварительный просмотр изображения через uploader.makethumb.
PS: Вы получаете здесь данные URL -адреса данных, а IE6 и IE7 не поддерживают прямой предварительный просмотр. Предварительный просмотр может быть завершен с помощью Flash или сервера.
// Когда добавляется файл, uploader.on ('filequed', function (file) {var $ li = $ ('<div id = "' + file.id + '">' + '<img>' + '<div>' + file.name + '</div>' + '</div>'), $ img = $ li.find (imger '); ; src);Тогда остальное - это подсказка статуса загрузки. Когда процесс загрузки файла загружен, загрузка успешна, загрузка не удалась, а загрузка завершается, события oploadprogress, uploadSuccess, uploadError и uploadcomplete соответственно соответствуют событиям upload -progress, uploadSuccess, uploadError и загрузки.
// Создать панель прогресса для отображения в режиме реального времени во время загрузки файлов. uploader.on ('uploadprogress', function (file, процент) {var $ li = $ ('#'+file.id), $ процент = $ li.find ('. $ процент. uploader.on ('uploadsuccess', function (file) {$ ('#'+file.id) .AdDClass ('upload-State-Done');}); // Отсутствие загрузки файла, и была отображена ошибка загрузки. uploader.on ('uploadError', function (file) {var $ li = $ ('#'+file.id), $ error = $ li.find ('div.error'); // избегать повторного создания if (! $ errue.length) {$ error = $ ('<div> </div>'). Appendto ($ li); Завершено, это успешно или не удалось, сначала удалите планку прогресса. uploader.on ('uploadcomplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Remove ();});Выше приведено введение в то, как использовать плагин для загрузки веб-загрузки. Я надеюсь, что это будет полезно для каждого обучения.