Web Uploader基本用法

Web Uploader基本用法

　　这一段时间在使用Web Uploader，所以记录下Web Uploader基本用法及多线程分片上传，片乱序问题。
　　一、简单介绍
　　WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。
　　官网地址
　　二、基本用法
　　1、下载Web uploader，在html页面引入webuploader.js、webuploader.css、jquery-2.2.3.min.js。
　　2、html页面很简单，thelist是文件信息列表，picker文件选择按钮，btnSync上传按钮

<div id="thelist" class="uploader-list"></div>
    <div style="margin: 20px 20px 20px 0;">
        <div id="picker" class="form-control-focus">选择文件</div>
    </div>
    <button id="btnSync" type="button" class="btnStyle">开始上传</button>

2、创建webuploader对象，并设置相关属性，绑定相关事件，具体参考官方API

<script>
        var uploader = WebUploader.create({
            // swf文件路径
            //swf :'/webSocket/resources/swf/Uploader.swf',
            // 文件接收服务端。
            server : '/webSocket/server/upload',
            //是否分片，true是
            chunked : true,
            //分片，每一片大小，不分片，此配置无效
            chunkSize:16384,
            //上传进程
            threads : 100,
            //表单数据
            fromData : {
                guid : 'guid'
            },
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick : '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize : false,
        });
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function(file) {
            $("#thelist").append(
                    '<div id="' + file.id + '" class="item">'
                            + '<h4 class="info">' + file.name + '</h4>'
                            + '<p class="state">等待上传...</p>'
                            +'<div class='+'progressBar'
                            +'><div class='+'barStyle'+'></div></div>'
                            + '</div>');
        });
        uploader.on('uploadSuccess', function(file,response) {
            $('#' + file.id).find('p.state').text("success="+response._raw);
        });
        uploader.on('uploadError', function(file,response) {
            $('#' + file.id).find('p.state').text("error="+response);
        });
        uploader.on('uploadComplete', function(file) {
            var fileBox = $('#'+file.id);
            var stateBar = fileBox.find('.state');  
            $(stateBar).html("上传完成");
            $('#' + file.id).find('.progress').fadeOut();
        });
        uploader.on('uploadStart', function(file) {
            var fileBox = $('#'+file.id);
            var stateBar = fileBox.find('.state');  
            $(stateBar).html("正在上传");
        });
        //进度条事件
        uploader.on('uploadProgress',function( file, percentage){
            var fileBox = $('#'+file.id);
            var diyBar = fileBox.find('.progressBar');  
            var bar = diyBar.find('.barStyle');
            //$(bar).html(":"+percentage.toFixed(2)*100+"%");
            showDiyProgress( percentage.toFixed(2),10, file.id);
        });

3、添加进度条方法

//操作进度条;
        function showDiyProgress(percentage, speed, id) {
            var progressBar=$("#" + id).find('.progressBar');
            var proBarWith = parseInt(progressBar.width());
            var bar = progressBar.find('.barStyle');
            var startWidth = parseInt($(bar).width());
            var endWidth = proBarWith * percentage;
            var barWidth=0;
            //初始化js进度条
            //进度条的速度，越小越快
            var speed = 1;
            setInterval(function() {
                //宽度要不能大于进度条的总宽度
                if (barWidth <= endWidth) {
                    while(barWidth <= endWidth){
                        barWidth = barWidth + 1;
                        $(bar).css("width", barWidth+"px");
                    }
                } else {
                    //停止
                    clearInterval(bar);
                }
            }, speed);
        }

4、添加上传点击事件

$("#btnSync").on('click', function() {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            uploader.options.formData.guid = Math.random();
            uploader.upload();

        });

5、接收端

public class WebUploadServer {
    public void upload(@RequestParam(value = "file", required = false) MultipartFile file,
     HttpServletRequest request,
    HttpServletResponse response) throws JsonGenerationException, 
    JsonMappingException, IOException {
        String guid=request.getParameter("guid");
        //判断是否分片
        if (request.getParameter("chunk") == null) {
        //设置路径
            String realPath 
            = request.getSession().getServletContext()
.getRealPath("/Upload/");
    //获取文件名
            String fileName = file.getOriginalFilename();
            File targetFile = new File(realPath, fileName);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            file.transferTo(targetFile); // 小文件，直接拷贝
            response.getWriter().write("success");
        } else {
            int chunk = Integer.parseInt(request.getParameter("chunk")); // 当前分片
            int chunks = Integer.parseInt(request.getParameter("chunks")); // 分片总计
            String realPath = request.getSession().getServletContext().getRealPath("/Upload/");
            String Ogfilename = file.getOriginalFilename();
            File tempFile = new File(realPath, Ogfilename);
            OutputStream outputStream = new FileOutputStream(tempFile, true);
            InputStream inputStream = file.getInputStream();
            byte buffer[] = new byte[1024];
            int len = 0;
            while ((len = inputStream.read(buffer)) > 0) {
                outputStream.write(buffer, 0, len);
            }
            inputStream.close();
            outputStream.close();
            if(chunks-chunk==1)
                response.getWriter().write("success");
        }
    }
}

注
在上传文件的时候，遇到了文件名乱码或者文件乱码的情况，检查了jsp的页面一直都是utf-8，在服务端尝试了各种编码类型，发现都是错误的。最后发现是SpringMVC的配置文件没有显示配置文件上传的编码类型，所以导致编码不一致。

<bean id="multipartResolver" 
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
    p:defaultEncoding="UTF-8"
    p:maxUploadSize="5400000"/>