开发记录————web uploader

双11刚刚过去，各位不是自己剁手就是被秀恩爱秀一脸，作为一个Not find object的Java程序员来说，还是老实上班比较好吧。毕竟，1没钱2没女朋友的我拿什么晒朋友圈？是dota暴走还是满屋子的高达、手办和游戏？又或者是自己DIY的机箱？没卖点啊！！！！
好了，每周一吐槽进入正题。今天是记录一个比较简单的web uploader的上传，老样子，写给同样出来混的新人菜鸟，能帮上忙真是太好了。也是求老鸟指教。
百度有个上传插件叫web uploader（同样，提供官网地址http://fex.baidu.com/webuploader/），这个还是在我们现在项目的原有插件uploadify出了点兼容性的小问题不能用了之后才知道的，嗯！百度居然还在做插件！！！我以为他就只有一个容易出问题的搜索框呢（笑）。因为我们主要是用在上传用户头像这一块并且是写在JS里的，所以1、简单到不能再简单，所以我看了半天API也没看懂，最后自己琢磨出来的。2、仅适用于JS，什么用Java传输啦，php之类的抱歉，你们要失望了，这只是个菜鸟写的，没什么技术含量。
那就开始吧，首先，打开webstone。。。。。扯的有点早，直接开始。
首先，在官网下载压缩包，实际上是进入Github下载，百度是不是抱了大腿（笑），压缩包直接打开就可以放入项目
然后在页面上导入JS

<script type="text/javascript" src="${basepath}/webuploader-0.1.5/webuploader.nolog.min.js"></script>

注意导入min.js格式的压缩文件，这个以前上课老师说过，JS引入要导min文件，可惜我忘到九霄云外去了。
然后接下来就简单了，

$(function(){
         // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: '${basepath}/webuploader-0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: server,//这里根据需要的上传地址自行上传

        //设置文件上传域的name
        failVal: 'file',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: "#filePicker",//这地方说白了就是入口，你需要在哪添加上传按钮，就把拿个元素的id放过来，有可能是input，也可能是a

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

        //文件上传方式，POST或者GET
        method:'POST',

        //这里是控制单个文件上传文件大小
        fileSingleSizeLimit: maxSize * 1024 * 1024,

        //文件上传请求的参数表，每次发送都会发送此对象中的参数
        formData:{'token':uptoken},
    });

    //这里是上传初始化后动作，括号里第一个参数是事件名称，这是是成功事件
    uploader.on('uploadSuccess', function (file ,response) {
        eval(callback(file ,response));//这里我做了一个回掉，获取服务器回传的数据，因为上传的是一个图片，这是是对服务器回传的图片哈希码进行处理
    })

    //上传失败事件，我只是加了一个日志打印，一般都是会提示用户上传失败了，有个自己网站设计的弹框什么的
    uploader.on('uploadError', function(file, reason){
        alert("上传失败");
        console.log(reason)
    })
})

这里还把页面元素拿出来,随你是jsp还是html，各取所需，但dom元素是一样的

<div class="row">
    <div class="form-group">
        <label class="col-sm-3 control-label">头像</label>
        <input type="hidden" name="face" id="face" value="">
            <div class="col-sm-5">
            <a id="filePicker">上传头像</a>
            <p class="info" style="margin-top:20px;">支持JPEF, PNG文件，最大1M。图片尺寸为:(1:1)最小300px</p>
            <div class="uploadedImg">
            <img src="${basepath}/static/images/common/user.png" id="cover_show">
            </div>
        </div>
    </div>
</div>

一个简单的上传图片就好了，没什么难的，看不懂就多试试，亲手试试就出来了。