WebUploader插件

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" >

<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() ;
}) ;

猜你喜欢