百度 WebUploader 单图片上传 简单的使用方法

小记一次使用WebUploader的基本方法，如有欠妥，恳请指教~

感谢Baidu FEX 团队开发出这么好的上传组件

1. 引入资源
   这儿不过多赘述了，官方Getting Started已经写的很明白了，我直接用了demo上的代码。

2. 图片上传option

 // 初始化Web Uploader
 uploader = WebUploader.create({
    // 自动上传。
    auto: true,
    
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: {
        id: '#filePicker',
        multiple: false//选图片时禁用多选
     },

    //只上传一个
    //fileNumLimit: 1,

    // 只允许选择文件，可选。
    accept: {
        title: '请选择JPG图片',
        extensions: 'jpg,jpeg',
        mimeTypes: 'image/*'
    },

    //配置压缩图片
    compress:{
        compressSize: 1048576,//不超过此字节数不会压缩图片
        preserveHeaders: false,//是否保存头部meta信息
        width: 518,//1寸295*413
        heigtht: 826,
        quality: 100//图片质量
    }

 })

只上传一个//fileNumLimit: 1
这里把上传队列数注释是因为业务需要，当选完照片又想换掉，就需要再次执行，如果不放开就不能再加入图片进入队列了。

	//当文件被加入队列之前触发
    uploader.on("beforeFileQueued", function () {
	    //取到所有文件队列
        var files = uploader.getFiles();
        //如果有文件说明是再次上传，清除掉缩略图再重置以前的队列
        if (files.length) {
            $("#" + files[files.length - 1].id).remove();//清掉缩略图
            uploader.reset();//清掉队列
        }
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function (file,res) {
        $("#imgname").val(res._raw);//服务器端返回的数据
        $('#' + file.id).addClass('upload-state-done');

    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on('uploadComplete', function (file) {
        $('#img').remove();//清除页面图片为新图片缩略图让位
        $('#' + file.id).find('.progress').remove();
    });

这里只写了上传单图片需要的option，全部代码请根据官方Demo的js源码进行修改