WebUploader使用

由于项目要求接触了WebUploader,期间参考了官网以及很多网友的资料，现将整个代码以及过程中遇到的小难题解决方案分享给大家。

项目要求：
1.初始状态下，隐藏上传文件按钮，选择下拉框实际内容时才显现
2.针对每一个下拉框菜单，只能上传一个文件，且格式为.xlsx
3.选择文件后自动上传

本人用了bootstrap，格式方面的问题毋需关注，只需要注意这里的class我用了hidden

<div id="uploader" class="form-inline pull-right col-md-8 hidden">
    <div class="form-group form-inline">
        <div id="picker" style="float:left">选择文件</div>&nbsp;
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
    </div>
</div>

下拉框的html代码为

<select id="resourceType" class="form-control " > 
    <option value="" selected = "selected" >请选择</option> 
    <option value="1">图书</option>
    <option value="2">档案</option>
    <option value="3">古籍</option>
    <option value="4">学术论文</option>
    <option value="5">文学作品</option>
</select>

重头戏来了，接下来是我使用的WebUploader代码

    //Excel文件上传
    //由于上传的不是大型图片，因此压缩、缩略图、分片等的操作在此没有展示

    /*init webuploader*/
    //注意，这一步的变量提取是官网的资料中缺少的
    var $list = $('#thelist');

    var uploader = WebUploader.create({
    //是否自动上传，如果为false，则在之前的html代码中需要再设置一个button来进行上传
      auto: true,
      // swf文件路径（根据你自己的工程目录进行设置）
      swf: '../../static/lib/plugins/webuploader/Uploader.swf', 
      // 文件接收服务端（路由）
      server: '/copyright/resourceBind/excelUpload', 
      pick: {
        // 选择文件的按钮。可选
        id: '#picker', 
        //不允许单次上传时同时选择多个文件
        multiple: false
      },
      //允许上传的文件总数量为1
      fileNumLimit: 1,
      // 只允许选择excel表格文件。
      accept: {
        title: 'Applications',
        extensions: 'xlsx',
        mimeTypes: 'application/xlsx'
      }
    });

    /** * 验证文件格式、数量以及文件大小 */
    uploader.on("error", function(type) {
      if (type == "Q_TYPE_DENIED") {
        alert("请上传xlsx格式文件");
      } else if (type == "F_EXCEED_SIZE") {
        alert("文件大小不能超过8M");
      } else if (type == "Q_EXCEED_NUM_LIMIT") {
        alert("一种资源只能上传一个文件");
      }
    });


    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function(file) {
      $list.append('<span id="' + file.id + '" class="item">' +
        '<span class="info">' + file.name + '</span>' +
        '<p class="state">等待上传...</p>' +
        '</span>');
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function(file, percentage) {
      var $li = $('#' + file.id),
        $percent = $li.find('.progress .progress-bar');

      // 避免重复创建
      if (!$percent.length) {
        $percent = $('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
          '</div>').appendTo($li).find('.progress-bar');
      }

      $li.find('p.state').text('上传中');

      $percent.css('width', percentage * 100 + '%');
    });
    // 文件上传成功
    uploader.on('uploadSuccess', function(file) {
      $('#' + file.id).find('p.state').text('已上传');
    });

    //文件上传是否成功的状态
    var flag = true;
    //根据服务器返回的数据判断文件是否上传成功
    //这个函数会接收来自服务器的文件上传是否成功的状态，这个事件发生在‘uploadError’之前
    //data为服务器返回的数据，是个对象，如果服务器返回的是json格式，那么正和我们的意。如果不是json格式，response._raw里面可以拿到原始数据。所以，webuploader对于后端返回的数据格式是没有要求的
    uploader.on("uploadAccept", function(file, data) {
      if (data.op_result == "0") {
        // 通过return false来告诉组件，此文件上传有错。
        flag = false;
        return false;
      }
    });
    // 文件上传失败，显示上传出错
    uploader.on('uploadError', function(file) {
      $('#' + file.id).find('p.state').text('上传出错');
    });

    // 完成上传完
    uploader.on('uploadComplete', function(file) {
      $('#' + file.id).find('.progress').fadeOut();
    });

关于下拉框事件的代码

$("#toolbar_btnList_resource").on('change', '#resourceType', function(event) {
      event.preventDefault();
      var resourceType = $("#resourceType").val();
      //每当下拉框发生变化，清除上一次的文件上传状态提示信息
      $(".item").remove();
      if (resourceType != "") {
        $("#uploader").removeClass('hidden');
        //解决隐藏之后显示不能点击的问题
        uploader.refresh();
      } else {
        $("#uploader").addClass('hidden');
      }
      switch (resourceType) {
        case "1":
          $(".resourceTable").bootstrapTable("destroy");
          initReportBook();
          uploader.reset(); //重置uploader,可以继续上传文件
          break;
        case "2":
          $(".resourceTable").bootstrapTable("destroy");
          initReportArchive();
          uploader.reset(); //重置uploader,可以继续上传文件
          break;
        case "3": //古籍
          $(".resourceTable").bootstrapTable("destroy");
          initReportAncientbooks();
          uploader.reset(); //重置uploader,可以继续上传文件
          break;
        case "4":
          $(".resourceTable").bootstrapTable("destroy");
          initReportPaper();
          uploader.reset(); //重置uploader,可以继续上传文件
          break;
        case "5":
          $(".resourceTable").bootstrapTable("destroy");
          initReportLiteraryworks();
          uploader.reset(); //重置uploader,可以继续上传文件
          break;
      }
    });

服务器端接收文件
server: ‘/copyright/resourceBind/excelUpload’路由对应的处理程序如下（服务器端我使用的是Beego）

//excel文件上传
func (c *CopyrightController) ExcelUpload() {
    f, h, err := c.GetFile("file")
    defer f.Close()

    checkErr(err)
    if err != nil { //上传文件出错
        c.Data["json"] = map[string]interface{}{"op_result": 0, "message": ""}
        c.ServeJSON()
        return
    } else {
        fmt.Println(h.Filename)
        c.SaveToFile("file", "upload/"+h.Filename) // 保存位置在 /upload, 没有文件夹要先创建
    }
    c.Data["json"] = map[string]interface{}{"op_result": 0, "message": ""}
    c.ServeJSON()
    return
}