Web uploader上传word，pdf实例

看了许多，终于自己做了一个。废话不说，直接上代码

html部分

<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>

js部分

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

        auto: false,                                         //自动上传
        swf: '/css/js/plugins/webuploader/Uploader.swf',     // swf文件路径
        server: '/xxxx/upload/xxxxx',                    // 文件接收服务端。
        pick: '#picker',                                     // 选择文件的按钮。可选。
        accept: {  
            title: 'Files',  
            extensions: 'pdf,doc,docx',
            mimeTypes: 'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'  
                       +',application/pdf'  
        },
        fileNumLimit: 10,                              //最大上传数量为10
        fileSingleSizeLimit: 20 * 1024 * 1024,         //限制上传单个文件大小20M
        fileSizeLimit: 200 * 1024 * 1024,              //限制上传所有文件大小200M
        resize: false                                  // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    });

    //上传前的判断处理
    uploader.on('error', function( type ){
        if ( type === 'Q_EXCEED_NUM_LIMIT' ) {
            layer.msg('最多允许上传10份xxx');
        } 
        if ( type === 'F_DUPLICATE' ) {
            layer.msg('xxx重复，不能上传！');
        }
        if (type=="Q_TYPE_DENIED"){
            layer.msg("请上传doc、pdf格式文件");
        }else if(type=="F_EXCEED_SIZE"){
            layer.msg("文件大小不能超过20M");
        }
    });

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

    //点击开始上传
     $("#ctlBtn").on( 'click', function() {  
         uploader.upload();  
     });

    // 文件上传过程中创建进度条实时显示。
    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('已上传');
        $( '#'+file.id ).find('a.webuploadDelbtn').remove();
    });
    //上传错误
    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });
    //上传完成
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });

    //删除
    $list.on("click", ".webuploadDelbtn", function () {
        var $ele = $(this);
        var id = $ele.parent().attr("id");
        var file = uploader.getFile(id);
        uploader.removeFile(file,true);  
    }); 

    //删除时执行的方法
    uploader.on('fileDequeued', function (file) {
        $(file.id).remove();
        $('#'+file.id ).find('span.state').text('已经取消');
        $('#'+file.id).hide();   
        console.log("remove");     
    }); 

java 后台

    @RequestMapping("/xxx")
    @ResponseBody
    public void uploaderResumes(@RequestParam("file") MultipartFile file, HttpServletRequest request) {  
        // 判断文件是否为空  
        if (!file.isEmpty()) {  
            try {  
                // 文件保存路径  
                String filePath = request.getSession().getServletContext().getRealPath("/") + "upload" 
                        + System.getProperty("file.separator") 
                        + file.getOriginalFilename();  
                // 转存文件  
                file.transferTo(new File(filePath));  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
        }  
    }

图片