webuploader的使用文件上传组件

xiaoxiao2021-02-28  57

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。

最近做两个项目均使用到。接口简单,引用资源也不多

// 图片上传demo jQuery(function() {     var $ = jQuery,         $list = $('#fileList'),         // 优化retina, 在retina下这个值是2         ratio = window.devicePixelRatio || 1,         // 缩略图大小         thumbnailWidth = 100 * ratio,         thumbnailHeight = 100 * ratio,         // Web Uploader实例         uploader;     // 初始化Web Uploader     uploader = WebUploader.create({         // 自动上传。         auto: true,         // swf文件路径         swf: BASE_URL + '/js/Uploader.swf',         // 文件接收服务端。         server: 'http://webuploader.duapp.com/server/fileupload.php',         // 选择文件的按钮。可选。         // 内部根据当前运行是创建,可能是input元素,也可能是flash.         pick: '#filePicker',         // 只允许选择文件,可选。         accept: {             title: 'Images',             extensions: 'gif,jpg,jpeg,bmp,png',             mimeTypes: 'image/*'         }     });     // 当有文件添加进来的时候     uploader.on( 'fileQueued'function( file ) {         var $li = $(                 '<div id="' + file.id + '" class="file-item thumbnail">' +                     '<img>' +                     '<div class="info">' + file.name + '</div>' +                 '</div>'                 ),             $img = $li.find('img');         $list.append( $li );         // 创建缩略图         uploader.makeThumb( file, function( error, src ) {             if ( error ) {                 $img.replaceWith('<span>不能预览</span>');                 return;             }             $img.attr( 'src', src );         }, thumbnailWidth, thumbnailHeight );     });     // 文件上传过程中创建进度条实时显示。     uploader.on( 'uploadProgress'function( file, percentage ) {         var $li = $( '#'+file.id ),             $percent = $li.find('.progress span');         // 避免重复创建         if ( !$percent.length ) {             $percent = $('<p class="progress"><span></span></p>')                     .appendTo( $li )                     .find('span');         }         $percent.css( 'width', percentage * 100 + '%' );     });     // 文件上传成功,给item添加成功class, 用样式标记上传成功。     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 ( !$error.length ) {             $error = $('<div class="error"></div>').appendTo( $li );         }         $error.text('上传失败');     });     // 完成上传完了,成功或者失败,先删除进度条。     uploader.on( 'uploadComplete'function( file ) {         $( '#'+file.id ).find('.progress').remove();     }); });

这个开发团队很大,遇到问题,上github很快就回复了。

webuploader官方地址 http://fex-team.github.io/webuploader/

转载请注明原文地址: https://www.6miu.com/read-53711.html

最新回复(0)