【java】批量上传图片并回显功能

一、前言

      在电商的网站中，图片上传功能必不可少，小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能。可以说这是一个很常见的功能了，已经烂大街了，但是小编还是要认真的分析一下，以便日后用到。

二、上传功能分析

      我实现的上传框架是JQuery+SpringMvc+spring+FastDFS。

      前台借助KindEditor的上传文件的插件，从而达到上传和回显的功能。关于KindEditor的使用，小编会在后面的文章中向大家介绍。

      实现的效果如下：

      实现流程：
      点击上传图片，会弹出“批量图片上传”的模态窗体，点击添加图片，就可以选择要添加的图片，可以选择一张，也可以选择多张，点击开始上传就会把选中的图片上传到FastDFS上面，然后回显到空白的位置。

三、功能实现

3.1 前台编写

      上传图片按钮：

      页面初始化完毕后执行js中 的代码，它会创建一个富文本编辑器，然后进行初始化，初始化的时候，会调用Common.js中的createEditor方法，创建一个富文本编辑器。

      然后又会调用init方法，来实例化一个Common.js中的实例，初始化图片上传器。

<form id="itemAddForm" class="itemForm" method="post">
    <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
</form>
<script type="text/javascript">
    var itemAddEditor ;
    //页面初始化完毕后执行此方法
    $(function(){
        //创建富文本编辑器
        itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
        //初始化图片上传器
        TAOTAO.init({fun:function(node){

        }});
    });
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

      Commom.js:

var TT = TAOTAO = {
    // 编辑器参数
    kingEditorParams : {
        //指定上传文件参数名称，Controller中接收参数使用的参数名
        filePostName  : "uploadFile", 
        //指定上传文件请求的url。
        uploadJson : '/pic/upload',
        //上传类型，分别为image、flash、media、file
        dir : "image"
    },
    createEditor : function(select){
        return KindEditor.create(select, TT.kingEditorParams);
    },
    init : function(data){
        // 初始化图片上传组件
        this.initPicUpload(data);
    },
    // 初始化图片上传组件
    initPicUpload : function(data){
        $(".picFileUpload").each(function(i,e){
            var _ele = $(e);
            _ele.siblings("div.pics").remove();
            _ele.after('\
                <div class="pics">\
                    <ul></ul>\
                </div>');
            // 回显图片
            if(data && data.pics){
                var imgs = data.pics.split(",");
                for(var i in imgs){
                    if($.trim(imgs[i]).length > 0){
                        _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
                    }
                }
            }
            //给“上传图片按钮”绑定click事件
            $(e).click(function(){
                var form = $(this).parentsUntil("form").parent("form");
                //打开图片上传窗口
                KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
                    var editor = this;
                    editor.plugin.multiImageDialog({
                        clickFn : function(urlList) {
                            var imgArray = [];
                            KindEditor.each(urlList, function(i, data) {
                                imgArray.push(data.url);
                                form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                            });
                            form.find("[name=image]").val(imgArray.join(","));
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    }
};

• 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

3.2 后台的编写

      后台使用，就必须要先导入两个jar包：

• Commons-io.jar

• Commons-fileupload.jar

      然后在springmvc.xml中配置多媒体解析器：

<!-- 配置多媒体解析器 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设定默认编码 -->
        <property name="defaultEncoding" value="UTF-8"></property>
        <!-- 设定文件上传的最大值5MB，5*1024*1024 -->
        <property name="maxUploadSize" value="5242880"></property>
    </bean>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

      响应的内容：

• 约定大于配置

      返回格式(JSON):

//成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

需要创建一个pojo描述返回值。

Pojo中有三个属性：error、url、message。

public class PictureResult {

    private int error;
    private String url;
    private String message;
    public int getError() {
        return error;
    }
    public void setError(int error) {
        this.error = error;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
}

• 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

3.2.1 Service层

      接收图片数据，把图片上传到图片服务器，返回PictureResult 。需要使用FastDFSClient工具类。

• 参数：MultiPartFile pictureFile

• 返回值：PictureResult

@Service
public class PictureServiceImpl implements PictureService {

        @Override
        public PictureResult uploadPic(MultipartFile picFile) {
                PictureResult result = new PictureResult();
                //判断图片是否为空
                if (picFile.isEmpty()) {
                        result.setError(1);
                        result.setMessage("图片为空");
                        return result;
                }
                //上传到图片服务器
                try {
                        //取图片扩展名
                        String originalFilename = picFile.getOriginalFilename();
                        //取扩展名不要“.”
                        String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
                        FastDFSClient client = new FastDFSClient("classpath:properties/client.conf");
                        String url = client.uploadFile(picFile.getBytes(), extName);
                        //把url响应给客户端
                        result.setError(0);
                        result.setUrl(url);
                } catch (Exception e) {
                        e.printStackTrace();
                        result.setError(1);
                        result.setMessage("图片上传失败");
                }
                return result;
        }

}

• 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

3.2.2 Controller

      接收上传的图片信息，调用Service把图片上传到图片服务器。返回json数据。需要使用@ResponseBody

@Controller
public class PictureController {

    @Autowired
    private PictureService pictureService;
    @RequestMapping("/pic/upload")
    @ResponseBody
    public PictureResult uploadFile(MultipartFile uploadFile) {
        PictureResult result = pictureService.uploadPic(uploadFile);
        return result;
    }
}