​官网  

其实官网写的挺详细的，看官网也可以了。

引入资源

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

　　

Html

要实现如上demo，首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。

     
     
 
       
      
 
      
       选择图片
      
 
     

Javascript

创建Web Uploader实例

$(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',//这里引入swf,根据你实际放置的位置            // 文件接收服务端。           server: 'http://webuploader.duapp.com/server/fileupload.php',            // 选择文件的按钮。可选。           // 内部根据当前运行是创建，可能是input元素，也可能是flash.           pick: '#filePicker',            // 只允许选择文件，可选。           accept: {               title: 'Images',               extensions: 'gif,jpg,jpeg,bmp,png',               mimeTypes: 'image/jpg,image/jpeg,image/png'//这里默认是 image/*,但是会导致很慢           }       });        // 当有文件添加进来的时候       uploader.on( 'fileQueued', function( file ) {           var $li = $(                   '
     
      ' +                   '
      ' +                   '
      
       ' + file.name + '
      
' +                   '
     
'               ),               $img = $li.find('img');            $list.append( $li );            // 创建缩略图           uploader.makeThumb( file, function( error, src ) {               if ( error ) {                   $img.replaceWith('不能预览');                   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 = $('
')                   .appendTo( $li )                   .find('span');           }            $percent.css( 'width', percentage * 100 + '%' );       });        // 文件上传成功，给item添加成功class, 用样式标记上传成功。       uploader.on( 'uploadSuccess', function( file,response) {           $( '#'+file.id ).addClass('upload-state-done');           //console.log(response);输出           $('#file_name').prop("value", response.data);       });        // 文件上传失败，现实上传出错。       uploader.on( 'uploadError', function( file ) {           var $li = $( '#'+file.id ),               $error = $li.find('div.error');            // 避免重复创建           if ( !$error.length ) {               $error = $('
     
').appendTo( $li );           }            $error.text('上传失败');       });        // 完成上传完了，成功或者失败，先删除进度条。       uploader.on( 'uploadComplete', function( file ) {           $( '#'+file.id ).find('.progress').remove();       });})

　　这会有一个问题，就是点击以后弹出选择文件会很慢，需要将下面这一段进行修改：

// 只允许选择图片文件。    accept: {        title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } 修改为：

// 只允许选择文件，可选。           accept: {               title: 'Images',               extensions: 'gif,jpg,jpeg,bmp,png',               mimeTypes: 'image/jpg,image/jpeg,image/png'//默认为“image/*”           }

　　这样就可以了。