Ввести ресурсы
Загрузка файлов с использованием веб -загрузчика требует введения трех ресурсов: JS, CSS и SWF.
<!-Представление CSS-> <link rel = "styleSheet" type = "text/css" href = "WebUploader Polder/webUploader.css"> <!-Представление JS-> <Script Type = "Text/Javascript" SRC = "SWFALARDER POLPER/WEBUPLOARDERALER. будет отображаться позже->
Загрузка файла
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 ('. Progress-bar');Успех файлов и обработка сбоев
Если загрузка файла не выполняется, событие 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'). Text ('error umer ’);}); uploader.on ('uploadcomplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Fadeout ();}); uploader.on ('uploadcomplete', function (file) {$ ('#'+file.id) .find ('. Progress'). fadeout ();});Загрузка изображения
По сравнению с обычной загрузкой файлов, эта демонстрация демонстрирует: фильтрация файлов, предварительный просмотр изображения, загрузка сжатия изображения и другие функции.
HTML
Чтобы реализовать демонстрацию, как указано выше, вам сначала необходимо подготовить кнопку и контейнер для хранения добавленного списка информации о файлах.
<!-Dom Structure Part-> <div id = "uploader-demo"> <!-используется для хранения элемента-> <div id = "filelist"> </div> <div id = "filepicker"> выберите изображения </div> </div>
JavaScript
Создать экземпляр Web Roaderer
// Инициализировать веб -загрузчик varuloader = webuploader.create ({// загружать ли автоматически после выбора файла. Auto: true, // swf -файл pail swf: base_url + '/js/uploader.swf', // file reception 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 ('. .find ('span');} $ процент.css ('ширина', процент * 100 + '%'); // Файл успешно загружен, добавьте успешный класс в элемент и отметьте загрузку стилем. 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 (! $ erry.length) {$ error = $ ('<div> </div>'). appendto ($ li); // После завершения загрузки она успешна или не удалась, сначала удалите планку прогресса. uploader.on ('uploadcomplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Remove ();});Выше приведено соответствующие знания, введенные вам, используя веб-загрузчик для достижения многопрофильной загрузки. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!