Content Table
2016-10-17

Webuploader 上传文件

SpringMVC Ajax 拖拽上传文件 一文介绍了使用 jQuery File Upload 拖拽上传文件，也挺简单的，只不过使用的 js 文件比较多，这里介绍使用百度的 Webuploader 实现拖拽上传文件，只需要引入 2 个文件:

  • webuploader.css
  • webuploader.js

WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5 为主，FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势，同时又不摒弃主流 IE 浏览器，沿用原来的 FLASH 运行时，兼容 IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。

有下面一些特性:

  • 允许的类型
  • 允许的大小
  • 创建缩略图
  • 图片压缩
  • 上传进度
  • 拖拽上传
  • 自动上传
  • 手动上传: uploader.upload()
  • 更多信息请访问官网 http://fex.baidu.com/webuploader/，以及查看 API 文档。

上传文件的页面

webuploader.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Web Uploader</title>
    <link  href="/lib/webuploader.css" rel="stylesheet" media="screen">
    <script src="/lib/jquery.js" charset="utf-8"></script>
    <script src="/lib/webuploader.js" charset="utf-8"></script>

    <style media="screen">
        body {
            font-family: "微软雅黑", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
            margin: 50px;
        }

        #drop-area {
            color: gray;
            background: rgb(250,250,250);
            border: dashed 3px lightgray;
            width: 150px;
            height: 150px;
            padding: 20px;
            margin-bottom: 20px;
            line-height: 150px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="drop-area">拖拽图片到这里上传</div>
    <div id="uploader-demo">
        <div id="filePicker">点击选择图片</div>
        <div id="fileList" class="uploader-list"></div> <!--用来存放item-->
    </div>


    <script type="text/javascript">
        // 使用 IE6，7，8 时，如果 Flash 播放器版本低则需要升级一下
        if (!WebUploader.Uploader.support()) {
            alert( 'Web Uploader 不支持您的浏览器！如果你使用的是 IE 浏览器，请尝试升级 Flash 播放器');
            throw new Error( 'WebUploader does not support the browser you are using.' );
        }

        var uploader = WebUploader.create({
            auto: true,               // 自动上传
            dnd: '#drop-area',        // 拖拽到 #drop-area 进行上传，可选
            swf: '/lib/Uploader.swf', // swf 文件路径
            server: '/webuploader',   // 文件接收服务端 URL
            pick: '#filePicker',      // 选择文件的按钮，内部根据当前运行时创建，可能是 input 元素，也可能是 flash.
            resize: false,            // 不压缩 image, 默认如果是 jpeg，文件上传前会压缩一把再上传！
            accept: { // 只允许上传图片
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            compress: { // 对上传的图片进行裁剪处理，大于这个分辨率的图片会被压缩到此分辨率
                width: 300,
                height: 300,
                allowMagnify: false,
                crop: false // 是否等比缩放，false 为等比缩放
            }
        });

        // 上传成功
        // response 为服务器返回来的数据
        uploader.onUploadSuccess = function(file, response) {
            console.log(response);
            uploader.removeFile(file, true); // 启用多次上传同一个图片
        };

        // 上传失败，例如抛异常
        // response 为服务器返回来的数据
        uploader.onUploadError = function(file, response) {
            console.log(response);
        };

        // 上传进度 [0.0, 1.0]
        // fileQueued 时创建进度条，uploadProgress 更新进度条
        // 可以使用 file.id 来确定是哪个文件的上传进度
        uploader.onUploadProgress = function(file, percentage) {
            console.log(percentage);
            console.log('uploadProgress:' + file.id);
        };

        // 当有文件添加进来的时候
        // 如果是图片，还可以创建缩略图
        uploader.onFileQueued = function(file) {
            console.log('fileQueued:' + file.id);

            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
            );
            var $img = $li.find('img');
            $('#fileList').append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // src 是 base64 格式的图片
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, 100, 100); // 100 * 100 为缩略图多大小
        };
    </script>
</body>

</html>

服务器端

没啥好说的，就一普通的 Spring 上传文件，就算前端选择了多个文件，默认时后台也是一次接收到一个，逐个处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Controller
public class WebUploaderController {
    @GetMapping("/webuploader")
    public String webUploaderPage() {
        return "webuploader.html";
    }

    @PostMapping("/webuploader")
    @ResponseBody
    public Result uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
        System.out.println(file.getOriginalFilename());
        file.transferTo(new File("/Users/Biao/Desktop/x/" + file.getOriginalFilename()));
        return new Result(true, "OK", file.getOriginalFilename());
    }
}

别忘了把 commons-fileupload 加入工程，还要在 Spring 的配置文件里创建 multipartResolver，否则会报 file 为空指针，怎么都找不到原因

1
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

只允许选择上传 jpg 格式的图片

1
2
3
4
5
6
accept: { // 只允许上传图片
    title: 'Images',
    extensions: 'jpg,jpeg',
    // mimeTypes: 'image/*'
    mimeTypes: 'image/jpg,image/jpeg'
}

extensions 指定为 jpg,jpeg，但是如果 mimeTypes 为 image/*，仍然可以在文件选择框中选择其他类型的图片，例如 png，虽然最终是不会上传的，但是这样的行为比较怪异，设置 mimeTypes: 'image/jpg,image/jpeg' 后，在文件选择框里就只能选择 jpg, jpeg 的图片了