webuploader基于springboot的图片上传

原创 2018年04月15日 12:30:33

声明这里的代码基于我的项目开发的,学习了解代码根据各自的需求完善功能。

一、webuploader概要

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。 采用大文件分片并发上传,极大的提高了文件上传效率。
官网:http://fex.baidu.com/webuploader/

二、webuploader使用

  • 在官网下载包后导入css,js资源文件
<link href="${ctxPath}/static/css/plugins/webuploader/webuploader.css" rel="stylesheet">
<script src="${ctxPath}/static/js/plugins/webuploader/webuploader.min.js"></script>
<script src="${ctxPath}/static/js/common/web-upload-object.js"></script>
  • 写个文件上传的页面
<div class="form-group">
    <div class="col-sm-4">
        <div id="${id}PreId">
            <div><img width="100px" height="100px"
                @if(isEmpty(avatarImg)){
                      src="${ctxPath}/static/img/boy.jpg"></div>
                @}else{
                      src="${ctxPath}/kaptcha/${avatarImg}"></div>
                @}
        </div>
    </div>
    <div class="col-sm-2">
        <div class="head-scu-btn upload-btn" id="${id}BtnId">
            <i class="fa fa-upload"></i>&nbsp;上传
        </div>
    </div>
</div>
  • 封装webuploader的方法
/**
 * webuploader 工具类
 *
 * uploadUrl: 图片上传路径
 * uploadBtnId: 上传按钮的id
 * uploadPreId:图片预览框的id
 * fileSizeLimit: 图片上传最大限制
 * uploadBarId: 上传进度条
 */
(function() {
    var $WebUpload = function(pictureId,url) {
        this.pictureId = pictureId;
        this.uploadBtnId = pictureId + "BtnId";
        this.uploadPreId = pictureId + "PreId";
        this.uploadUrl = url;
        this.fileSizeLimit = 100 * 1024 * 1024;
        this.picWidth = 800;
        this.picHeight = 800;
        this.uploadBarId = null;
    };

    $WebUpload.prototype = {
        /**
         * 初始化webUploader
         */
        init : function() {
            var uploader = this.create();
            this.bindEvent(uploader);
            return uploader;
        },

        /**
         * 创建webuploader对象
         */
        create : function() {
            var webUploader = WebUploader.create({
                // 选完文件后,是否自动上传。
                auto : true,
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                pick : {
                    id : '#' + this.uploadBtnId,
                    multiple : false,// false只上传一个,true可以上传多个
                },
                // 只允许选择图片文件。
                accept : {
                    title : 'Images',
                    extensions : 'gif,jpg,jpeg,bmp,png',
                    mimeTypes : 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
                },
                // swf文件路径
                swf : Feng.ctxPath
                        + '/static/js/plugins/webuploader/Uploader.swf',
                //是否禁掉整个页面的拖拽功能
                disableGlobalDnd : true,
                //是否可以重复上传
                duplicate : true,
                //文件上传的服务器端
                server : this.uploadUrl,
                // 文件最大限制
                fileSingleSizeLimit : this.fileSizeLimit
                //如需获取更多的配置参数查看http://fex.baidu.com/webuploader/doc/index.html 文档
            });

            return webUploader;
        },

        /**
         * 绑定事件
         */
        bindEvent : function(bindedObj) {
            var me =  this;
            bindedObj.on('fileQueued', function(file) {
                /*这里默认设置上传图片大小宽高100px*/
                var $li = $('<div><img width="100px" height="100px"></div>');
                var $img = $li.find('img');

                $("#" + me.uploadPreId).html($li);

                // 生成缩略图
                bindedObj.makeThumb(file, function(error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                }, me.picWidth, me.picHeight);
            });

            // 文件上传过程中创建进度条实时显示。
            bindedObj.on('uploadProgress', function(file, percentage) {
                $("#"+me.uploadBarId).css("width",percentage * 100 + "%");
            });

            // 文件上传成功,给item添加成功class, 用样式标记上传成功。
            bindedObj.on('uploadSuccess', function(file,response) {
                Feng.success("上传成功");
                $("#" + me.pictureId).val(response);
            });

            // 文件上传失败,显示上传出错。
            bindedObj.on('uploadError', function(file) {
                Feng.error("上传失败");
            });

            // 其他错误
            bindedObj.on('error', function(type) {
                if ("Q_EXCEED_SIZE_LIMIT" == type) {
                    Feng.error("文件大小超出了限制");
                } else if ("Q_TYPE_DENIED" == type) {
                    Feng.error("文件类型不满足");
                } else if ("Q_EXCEED_NUM_LIMIT" == type) {
                    Feng.error("上传数量超过限制");
                } else if ("F_DUPLICATE" == type) {
                    Feng.error("图片选择重复");
                } else {
                    Feng.error("上传过程中出错");
                }
            });

            // 完成上传完了,成功或者失败
            bindedObj.on('uploadComplete', function(file) {
            });
        },

        /**
         * 设置图片上传的进度条的id
         */
        setUploadBarId: function (id) {
            this.uploadBarId = id;
        }
    };
    window.$WebUpload = $WebUpload;
}());
  • 工具类的使用
 // 初始化图片上传
    var avatarUp = new $WebUpload("avatar",'/upload');
    avatarUp.setUploadBarId("progressBar");
    avatarUp.init();

三、后端处理图片上传

    /**
     * 上传图片
     */
    @RequestMapping(method = RequestMethod.POST, path = "/upload")
    @ResponseBody
    public String upload(@RequestPart("file") MultipartFile picture) {
        //设置图片为唯一的uuid
        String pictureName = UUID.randomUUID().toString() + ".jpg";
        try {
            //获取上传路径
            String fileSavePath = getFileUploadPath();
            /**
             * transferTo在开发Web应用程序时比较常见的功能之一,
             * 就是允许用户利用multipart请求将本地文件上传到服务器,
             * Spring通过对ServletAPI的HttpServletRequest接口进行扩展,使其能够很好地处理文件上传 
             */
            picture.transferTo(new File(fileSavePath + pictureName));
        } catch (Exception e) {
            throw new GunsException(BizExceptionEnum.UPLOAD_ERROR);
        }
        return pictureName;
    }
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zct1115/article/details/79948230

springMVC+WebUploader实现多图片上传

1.webuploader的文件下载 链接:http://pan.baidu.com/s/1jIdty30 密码:un47 2.spring的静态资源映射 3.上传文件的工具类...
  • liuyunshengsir
  • liuyunshengsir
  • 2017-04-18 18:09:05
  • 831

Web Uploader 高性能上传解决方案

推荐理由:百度FEX团队出品,HTML5+Flash 双核,易用高性能上传解决方案,NB的是,居然还支持IE6+ 在WEB应用开发的时候,文件上传是一项很麻烦却又必须的功能,这次极思维为你发现了...
  • oQiLiXiangFeng
  • oQiLiXiangFeng
  • 2014-07-03 10:24:40
  • 3320

WebUploader 图片上传插件前后端代码

由于git上面给出的后端代码是PHP版本的,所以我这里整理了个.NET版本的后台代码,希望能帮到大家...
  • ML01010736
  • ML01010736
  • 2017-07-24 10:43:50
  • 512

springMVC结合webUploader完美实现图片上传功能(最新版本)工具下载

  • 2017年05月03日 09:28
  • 36.25MB
  • 下载

基于webuploader的图片批量上传插件 php diyupload

  • 2017年06月15日 19:59
  • 1.35MB
  • 下载

webuploader 上传图片实例

  • 2015年05月09日 16:28
  • 3.44MB
  • 下载

百度上传图片webuploader与photoswipe预览图片

我结合amaze UI做的,大家可以参考看看 html 上傳圖片 ...
  • gao_xu_520
  • gao_xu_520
  • 2017-06-01 10:54:09
  • 1550

webuploader实现点击图片上传功能

之前写过一篇webuploader基本使用过程中的一些问题,可以参考 webuploader使用 实现的功能: 以默认图片作为初始图像,点击可更换图像 一次只能上传一张图片,但是每次选择完毕,图片...
  • chanmufeng
  • chanmufeng
  • 2017-10-12 14:59:30
  • 691

Web Uploader图片上传 java实现

后台代码 @RequestMapping("/fileUpload.do") public void uploadFiles(@RequestParam MultipartFile file,...
  • u014284252
  • u014284252
  • 2016-01-20 15:09:45
  • 1327

knockout结合webuploader实现图片上传demo

  • 2018年01月12日 09:39
  • 5.63MB
  • 下载
收藏助手
不良信息举报
您举报文章:webuploader基于springboot的图片上传
举报原因:
原因补充:

(最多只允许输入30个字)