SpringMVC框架结合amazeUI前端框架form表单上传多文件和实体

在看这篇博文之前，你应该先搭好SpringMVC框架，并下载amazeUI包，并参见教程配置好，具体参见百度上的教程，教程很多，这里就不多说啦。
下面是表单的信息，其中，图片上传实现了多张图片的上传，并且可以在线预览。

<form class="am-form am-form-horizontal" method="post" id="edit-form" action="<c:url value="/nmgindexintro/save" />">    <input type="hidden"  name="branchId" value="${branchId}">    <fieldset>        <legend>内蒙古公司展示</legend>        <div class="am-g">            <div class="am-u-sm-8">              <div class="am-form-group am-form-select am-g">                <label for="oc-ds-select-1" class="am-u-sm-2  am-form-label" style="font-size:12px;">文章类型</label>                <div class="am-u-sm-4 am-u-end">                    <select name="type" id="oc-ds-select-1">                        <option value="1">风土人情</option>                        <option value="2">经济概况</option>                        <option value="3">行业概况</option>                    </select>                </div>              </div>              <div class="am-form-group am-g">                <label for="doc-ipt-title-1" class="am-u-sm-2  am-form-label" style="font-size:12px;">标题</label>                <div class="am-u-sm-4 am-u-end">                  <input type="text" id="doc-ipt-title-1" placeholder="输入标题" name="title" >                </div>              </div>               <div class="am-form-group am-form-file am-g">                 <label for="doc-ipt-file-2" class="am-u-sm-2  am-form-label" style="font-size:12px;">选择图片</label>                 <div class="am-u-sm-4 am-u-end">                   <button type="button" class="am-btn am-btn-default am-btn-sm">                     <i class="am-icon-cloud-upload"></i> 选择图片</button>                 </div>                 <input  type="file" id="doc-ipt-file-2" name="titleImage"  multiple onchange="javascript:setImagePreviews();" accept=".jpg, .png ,.gif , .jpeg">               </div>               <div id="file-list"></div>                <div class="am-form-group am-form-file am-g">                  <label for="doc-ipt-file-3" class="am-u-sm-2 am-form-label" style="font-size:12px;">选择.MP4文件</label>                  <div  class="am-u-sm-4 am-u-end">                    <button type="button" class="am-btn am-btn-default am-btn-sm">                      <i class="am-icon-cloud-upload"></i> 选择.MP4文件</button>                  </div>                  <input type="file" id="doc-ipt-file-3" name="video" accept=".mp4">                </div>                   <div id="file-list2"></div>             </div>             <div class="am-u-sm-4" id="preview" style=" width:300px;height:220px;overflow:auto;">预览图片</div>        </div>        <div class="am-form-group am-form-select am-g">            <fieldset>                <legend>公司展示</legend>                <input type="hidden"  name="id" value="${info.id}">                <script id="container" name="content" type="text/plain" >                </script>            </fieldset>         </div>        <div class="am-g">            <p class="am-u-sm-1 am-u-sm-centered"><button type="submit" class="am-btn am-btn-default ">提交</button></p>            </div>    </fieldset></form><script>  $('#doc-ipt-file-2').on('change', function() {              var fileNames = '';              $.each(this.files, function() {                fileNames += '<span class="am-badge">' + this.name + '</span> ';              });              $('#file-list').html(fileNames);            });        $('#doc-ipt-file-3').on('change', function() {              var fileNames = '';              $.each(this.files, function() {                fileNames += '<span class="am-badge">' + this.name + '</span> ';              });              $('#file-list2').html(fileNames);            });    //图片预览功能            //下面用于多图片上传预览功能    function setImagePreviews(avalue) {        //获取选择图片的对象        var docObj = document.getElementById("doc-ipt-file-2");        //后期显示图片区域的对象        var dd = document.getElementById("preview");        dd.innerHTML = "";        //得到所有的图片文件        var fileList = docObj.files;        //循环遍历        for (var i = 0; i < fileList.length; i++) {                //动态添加html元素                    dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";            //获取图片imgi的对象            var imgObjPreview = document.getElementById("img"+i);             if (docObj.files && docObj.files[i]) {                //火狐下，直接设img属性                imgObjPreview.style.display = 'block';                imgObjPreview.style.width = '200px';                imgObjPreview.style.height = '180px';                //imgObjPreview.src = docObj.files[0].getAsDataURL();                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);   //获取上传图片文件的物理路径            }            else {                //IE下，使用滤镜                docObj.select();                var imgSrc = document.selection.createRange().text;                //alert(imgSrc)                var localImagId = document.getElementById("img" + i);               //必须设置初始大小                localImagId.style.width = "200px";                localImagId.style.height = "180px";                //图片异常的捕捉，防止用户修改后缀来伪造图片                try {                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;                }                catch (e) {                    alert("您上传的图片格式不正确，请重新选择!");                    return false;                }                imgObjPreview.style.display = 'none';                document.selection.empty();            }        }          return true;    }

接下来是后台处理程序
Controller主要是保存图片，并且记下图片的路径并创建唯一名称，传至后台入数据库。

@RequestMapping(value={"/save"}, method=RequestMethod.POST)    @ResponseBody    public String save(@RequestParam("titleImage") MultipartFile[] titleImage,@RequestParam("video") MultipartFile video,HttpServletRequest servletRequest) throws IOException {        List<String> listPicture=new LinkedList<String>();        for(MultipartFile picture : titleImage){              if(picture.isEmpty()){                  System.out.println("图片未上传");              }else{                  String savePath = request.getScheme() + "://" + request.getServerName()                + ":" + request.getServerPort() + request.getContextPath()                + "/static/js/u_editor/jsp/upload/";                String realPath = request.getSession().getServletContext().getRealPath("/static/js/u_editor/jsp/upload");                System.out.println(savePath);                System.out.println(realPath);                Date date = new Date();                SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");                String str = sdf.format(date)+picture.getOriginalFilename();                //这里不必处理IO流关闭的问题，因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉，我是看它的源码才知道的                  FileUtils.copyInputStreamToFile(picture.getInputStream(), new File(realPath, str));                 listPicture.add(savePath+str);            }          }          String Video=null;        if(video.isEmpty()){              System.out.println("视频未上传");          }else{              String savePath = request.getScheme() + "://" + request.getServerName()            + ":" + request.getServerPort() + request.getContextPath()            + "/static/js/u_editor/jsp/upload/";            String realPath = request.getSession().getServletContext().getRealPath("/static/js/u_editor/jsp/upload");            Date date = new Date();            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");            String str = sdf.format(date);            //这里不必处理IO流关闭的问题，因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉，我是看它的源码才知道的              FileUtils.copyInputStreamToFile(video.getInputStream(), new File(realPath, str+video.getOriginalFilename()));            Video = savePath+str+video.getOriginalFilename();           System.out.println(Video);        }          NmgIndexIntroUpdateRequest request =new NmgIndexIntroUpdateRequest();        request.setContent(servletRequest.getParameter("content"));        request.setTitle(servletRequest.getParameter("title"));        request.setTitleImage(listPicture);        request.setVideo(Video);        request.setType(servletRequest.getParameter("type"));        request.setBranchId(servletRequest.getParameter("branchId"));        NmgIndexIntroAccesser accesser = this.accesserFactory.createAccesser(NmgIndexIntroAccesser.class,CurrentUser.getAccessToken());        JSONObject result = new JSONObject();        try{        Response response = accesser.save(request);        switch (Status.fromStatusCode(response.getStatus())) {        case FOUND:            result.put("success", false);            result.put("msg", "文章已存在");            break;        case OK:            String uuid = response.readEntity(String.class);            result.put("success", true);            result.put("uuid", uuid);            result.put("msg", "创建成功");            break;        default:            result.put("success", false);            result.put("msg", "操作失败，请重试。");            break;        }        return result.toString();    } finally {        accesser.close();    }    }

Accesser，连接前台与后台的桥梁，通过调用相应的接口，连接后台，并将实体和图片路径入库。

@Override    public Response save(NmgIndexIntroUpdateRequest request) {        Assert.notNull(this.access_token, "access token required");        String uri = ResteasyWebResourceMap.get("NmgIndexIntroInterface.save");        AccessParameter parameters = new AccessParameter();        parameters.appendQueryParam("access_token", access_token);        ResteasyWebTarget target = this.buildJsonTarget(uri, parameters);        Response response = target.request().post(Entity.json(request));        return response;    }

Interface接口类，连接后台资源。

package com.kinth.admin.server.rest.api.interfaces;import javax.ws.rs.POST;import javax.ws.rs.PUT;import javax.ws.rs.Path;import javax.ws.rs.core.Response;import com.kinth.base.rest.api.entity.NmgIndexIntroListRequest;import com.kinth.base.rest.api.entity.NmgIndexIntroSearch;import com.kinth.security.persistent.entity.NmgIndexIntroUpdateRequest;@Path("admin/nmgindexintro")public interface NmgIndexIntroInterface {    /**     * 分页查询列表     * @param request     * @return     */    @POST    @Path("search")    Response search(NmgIndexIntroSearch request);    /**     * 更新     * @param      * @return     */    @PUT    @Path("update")    Response update(NmgIndexIntroUpdateRequest request);    /**     * 详情     * @param      * @return     */    @POST    @Path("edit")    Response get(Integer id);    @POST    @Path("list")    Response list(NmgIndexIntroListRequest request);    @POST    @Path("save")    Response save(NmgIndexIntroUpdateRequest request);}

Resourse连接底层DAO层，将实体和图片，视频路径入库。

@Override    public Response save(NmgIndexIntroUpdateRequest request) {        NmgIndexIntro nmg= NmgIndexIntroDao.findBybranchIdAndType(request.getBranchId(), request.getType());        if(nmg != null) {            return Response.status(Status.FOUND)                           .entity(new ErrorResponse("文章已存在", "文章已存在"))                           .build();            }        NmgIndexIntro nii=new NmgIndexIntro();        nii.setBranchId(request.getBranchId());        nii.setContent(request.getContent());        nii.setCreateTime(new Date());        nii.setStatus("1");        nii.setTitle(request.getTitle());        if(request.getTitleImage()!=null){            String titleImage="";            for(String s:request.getTitleImage()){                titleImage+=s;                titleImage+=",";            }            nii.setTitleImage(titleImage);        }        nii.setType(request.getType());        if(request.getVideo()!=""){            nii.setVideo(request.getVideo());        }        nii.setShortContent(request.getTitle()+request.getTitleImage());        this.NmgIndexIntroDao.saveAndFlush(nii);        return Response.ok().build();    }

DAO层

package com.kinth.security.persistent.dao;import com.kinth.base.persistent.BaseDAO;import com.kinth.security.persistent.entity.NmgIndexIntro;public interface NmgIndexIntroDAO extends BaseDAO<NmgIndexIntro, Integer>{    NmgIndexIntro findBybranchId(String branchId);    NmgIndexIntro findById(Integer id);    NmgIndexIntro findBybranchIdAndId(String branchId,Integer id);    NmgIndexIntro findBybranchIdAndType(String brandId,String Type);}

实体entity

package com.kinth.security.persistent.entity;import java.io.Serializable;import javax.persistence.*;import java.util.Date;/** * The persistent class for the nmg_index_intro database table. *  */@Entity@Table(name="nmg_index_intro")@NamedQuery(name="NmgIndexIntro.findAll", query="SELECT n FROM NmgIndexIntro n")public class NmgIndexIntro implements Serializable {    private static final long serialVersionUID = 1L;    private Integer id;    private String branchId;    private String content;    private Date createTime;    private String shortContent;    private String status;    private String title;    private String titleImage;    private String type;    private String video;    public NmgIndexIntro() {    }    @Id    @GeneratedValue(strategy=GenerationType.IDENTITY)    public Integer getId() {        return this.id;    }    public void setId(Integer id) {        this.id = id;    }    @Column(name="branch_id")    public String getBranchId() {        return this.branchId;    }    public void setBranchId(String branchId) {        this.branchId = branchId;    }    @Lob    public String getContent() {        return this.content;    }    public void setContent(String content) {        this.content = content;    }    @Temporal(TemporalType.TIMESTAMP)    @Column(name="create_time")    public Date getCreateTime() {        return this.createTime;    }    public void setCreateTime(Date createTime) {        this.createTime = createTime;    }    @Lob    @Column(name="short_content")    public String getShortContent() {        return this.shortContent;    }    public void setShortContent(String shortContent) {        this.shortContent = shortContent;    }    public String getStatus() {        return this.status;    }    public void setStatus(String status) {        this.status = status;    }    public String getTitle() {        return this.title;    }    public void setTitle(String title) {        this.title = title;    }    @Column(name="title_image")    public String getTitleImage() {        return this.titleImage;    }    public void setTitleImage(String titleImage) {        this.titleImage = titleImage;    }    public String getType() {        return this.type;    }    public void setType(String type) {        this.type = type;    }    @Column(name="video")    public String getVideo() {        return this.video;    }    public void setVideo(String video) {        this.video = video;    }}