CSS:
<link
rel=
"stylesheet"
type=
"text/css"
href=
"webupload/webuploader.css"
>
JS: <script src= "bower_components/webupload/webuploader.js" ></script> HTML: <div id= "uploader-demo" class= "col-sm-8" > <!-- 用来存放 item--> <div id= "fileList" class= "uploader-list" style= "width: 100%;" ></div> <div id= "filePicker" > 选择图片 </div> <input type= "hidden" id= "responseUrl" > </div> script: var uploader = WebUploader. create({ // 选完文件后,是否自动上传。 auto: true , // swf 文件路径 swf: 'bower_components/webupload/Uploader.swf' , // 文件接收服务端。 server: url. uploadFile. uri , // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是 input 元素,也可能是 flash. pick: '#filePicker' , // 只允许选择图片文件。 accept: { title: 'Images' , extensions: 'gif,jpg,jpeg,bmp,png' , mimeTypes: 'image/*' } }) ; // 文件上传过程中创建进度条实时显示。 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 + '%' ) ; }) ; // 当有文件添加进来的时候 uploader. on( 'fileQueued' , function( file ) { var $li = $( '<div id="' + file. id + '" class="file-item thumbnail" style="overflow: hidden">' + '<img>' + '</div>' ) , $img = $li. find( 'img') ; var $list = $( '#fileList') ; // $list 为容器 jQuery 实例 $list. append( $li ) ; // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader. makeThumb( file , function( error , src ) { if ( error ) { $img. replaceWith( '<span> 不能预览 </span>') ; return ; } $img. attr( 'src' , src ) ; } , 200 , 200 ) ; }) ; // 文件上传成功,给 item 添加成功 class, 用样式标记上传成功。 uploader. on( 'uploadSuccess' , function( file ,response) { $( '#responseUrl'). val(response. data) ; $( '#'+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() ; }) ; |
WebUploader插件
最新推荐文章于 2024-07-16 11:25:15 发布