图片上传，头像替换是在web开发中常见的功能之一，在如今前端技术频繁更新的时代，拥有快速开发实现项目功能的能力是非常重要的。下面介绍WebUploader的配置使用。

在此之前你需要一个图片上传的按钮和图片预览的载体，引入官网包的css和js文件。

示例HTML，很简单

1
2
3
4
<p>
    <img id="storeImg" src="/Images/StoreAdmin/face.jpg"/>
    <a href="javascript:;" class="choose_file">上传标志</a>
</p>

接下来进javascript预警区。

一、初始化图片上传实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 //图片上传
var uploader = WebUploader.create({
    auto: true, // 选完文件后，是否自动上传 
    swf: '/Plugin/webuploader/Uploader.swf', // swf文件路径 
    server: '/api/Refund/ImportImages', // 文件接收api 
    pick: '.choose_file', // 选择文件的按钮。可选
    // 只允许选择图片文件。 
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/jpg,image/jpeg,image/png,image/bmp,image/gif'
    },
    //配置生成缩略图的选项
    thumb: {
        type: 'image/jpg,jpeg,png,gif,bmp'
    },
    //请求服务器api携带的参数
    formData: { 
        token: token, 
        sessionid: "123" 
    }, 
    fileNumLimit: 1, //限制上传个数
    fileSingleSizeLimit: 2048000 //限制单个上传图片的大小 2M
});

二、当有图片添加进入，显示缩略图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
    
    //img容器
    var $img = $("#storeImg");

    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 宽 x 高
    uploader.makeThumb(file, function (error, src) {
        if (error) {   //错误处理
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
        $img.attr('src', src);
    }, 60, 60);
});

三、图片上传成功：

1
2
3
4
5
// 文件上传成
uploader.on('uploadSuccess', function (fil,response) {
    console.log(file);
    console.log(response._raw); //这里可以得到后台返回的数据
});

四、图片上传失败：

1
2
3
4
5
6
7
8
9
// 文件上传失败
uploader.on('uploadError', function (file) {
    console.log(file);
    
    uploader.removeFile(uploader.getFile(file.id)); //移除添加的文件
  uploader.onFileDequeued = function( file ) {  //查看文件列表
       console.log(uploader.getFiles());
  };
});

五、图片上传动作完成：

1
2
3
4
// 完成上传动作完了
uploader.on('uploadComplete', function (file) {
    console.log(file);
});

注：WebUploader会在a标签里面自动添加一个文件上传的按钮，只需要把按钮opacity属性设置为0，即可回到我们自己的布局中。