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

一、前言

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

二、上传功能分析

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

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

实现的效果如下：

实现流程：

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

三、功能实现

3.1 前台编写

上传图片按钮：

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

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

上传图片

Commom.js:

var TT = TAOTAO = {

// 编辑器参数

kingEditorParams : {

//指定上传文件参数名称，Controller中接收参数使用的参数名

filePostName : "uploadFile",

//指定上传文件请求的url。

uploadJson : '/pic/u