WebUploader 图片上传控件使用范例

​官网 http://fex.baidu.com/webuploader/getting-started.html

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

引入资源

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

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->

　　

Html

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

<!--dom结构部分-->
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>

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 = $(
                   '<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,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 = $('<div class="error"></div>').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/*”
           }

　　这样就可以了。