图片上传--Upload

　　　　　　　　　　　　图片上传--Upload

　　图片上传基于spring框架写的代码：

　　　　1.首先：我们要再springmvc中添加试图解析器：

     <!-- 图片解析器 -->
     <bean id="multipartResolver"
         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
         <property name="maxUploadSize" value="5242880"></property>
         <property name="defaultEncoding" value="utf-8"></property>
     </bean>

　　　　2.然后封装一个图片返回类

 package com.taotao.manage.bean;

 public class PicUploadResult {
     private Integer error;

     private String url;

     private String width;

     private String height;

     public Integer getError() {
         return error;
     }

     public void setError(Integer error) {
         this.error = error;
     }

     public String getUrl() {
         return url;
     }

     public void setUrl(String url) {
         this.url = url;
     }

     public String getWidth() {
         return width;
     }

     public void setWidth(String width) {
         this.width = width;
     }

     public String getHeight() {
         return height;
     }

     public void setHeight(String height) {
         this.height = height;
     }

 }

　　3.写一个userController

 package com.taotao.manage.controller;

 import java.awt.image.BufferedImage;
 import java.io.File;
 import java.io.IOException;
 import java.util.Date;

 import javax.imageio.ImageIO;
 import javax.servlet.http.HttpServletResponse;

 import org.apache.commons.lang3.RandomUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.joda.time.DateTime;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.MediaType;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.multipart.MultipartFile;

 import com.fasterxml.jackson.databind.ObjectMapper;
 import com.taotao.manage.bean.PicUploadResult;
 import com.taotao.service.impl.UpLoadServiceImpl;

 /**
  * 图片上传
  */
 @Controller
 @RequestMapping("/pic")
 public class PicUploadController {

     private static final Logger LOGGER = LoggerFactory.getLogger(PicUploadController.class);

     @Autowired
     private UpLoadServiceImpl loadService;
     private static final ObjectMapper mapper = new ObjectMapper();

     // 允许上传的格式
     private static final String[] IMAGE_TYPE = new String[] { ".bmp", ".jpg", ".jpeg", ".gif", ".png" };

     @RequestMapping(value = "/upload", method = RequestMethod.POST)
     @ResponseBody
     public String upload(@RequestParam("uploadFile") MultipartFile uploadFile, HttpServletResponse response)
             throws Exception {

         // 校验图片格式
         boolean isLegal = false;
         for (String type : IMAGE_TYPE) {
             if (StringUtils.endsWithIgnoreCase(uploadFile.getOriginalFilename(), type)) {
                 isLegal = true;
                 break;
             }
         }

         // 封装Result对象，并且将文件的byte数组放置到result对象中
         PicUploadResult fileUploadResult = new PicUploadResult();

         // 状态 圖片格式正确时为：0，错误时为：1
         fileUploadResult.setError(isLegal ? 0 : 1);

         // 文件新路径
         String filePath = getFilePath(uploadFile.getOriginalFilename());

         if (LOGGER.isDebugEnabled()) {
             LOGGER.debug("Pic file upload .[{}] to [{}] .", uploadFile.getOriginalFilename(), filePath);
         }

         // 生成图片的绝对引用地址
         String picUrl = StringUtils.replace(StringUtils.substringAfter(filePath, loadService.TAOTAO_UPLOAD_RESPOSITORY),
                 "\\", "/");
         // 用来显示图片的路径
         fileUploadResult.setUrl(loadService.TAOTAO_IMAGES_URL + picUrl);

         File newFile = new File(filePath);

         // 写文件到磁盘
         uploadFile.transferTo(newFile);

         // 校验图片是否合法
         isLegal = false;
         try {
             BufferedImage image = ImageIO.read(newFile);
             if (image != null) {
                 fileUploadResult.setWidth(image.getWidth() + "");
                 fileUploadResult.setHeight(image.getHeight() + "");
                 isLegal = true;
             }
         } catch (IOException e) {
         }

         // 状态
         fileUploadResult.setError(isLegal ? 0 : 1);

         if (!isLegal) {
             // 不合法，将磁盘上的文件删除
             newFile.delete();
         }

         response.setContentType(MediaType.TEXT_HTML_VALUE);
         return mapper.writeValueAsString(fileUploadResult);
     }

     // 获取文件路径
     // 接受的参数时上传文件的文件名
     private String getFilePath(String sourceFileName) {
         // File.separator：/
         String baseFolder = loadService.TAOTAO_UPLOAD_RESPOSITORY + File.separator + "images";
         Date nowDate = new Date();
         // yyyy/MM/dd
         String fileFolder = baseFolder + File.separator + new DateTime(nowDate).toString("yyyy") + File.separator
                 + new DateTime(nowDate).toString("MM") + File.separator + new DateTime(nowDate).toString("dd");
         File file = new File(fileFolder);
         if (!file.isDirectory()) {
             // 如果目录不存在，则创建目录
             file.mkdirs();
         }
         // 生成新的文件名
         String fileName = new DateTime(nowDate).toString("yyyyMMddhhmmssSSSS") + RandomUtils.nextInt(100, 9999) + "."
                 + StringUtils.substringAfterLast(sourceFileName, ".");
         return fileFolder + File.separator + fileName;
     }

 }

　　　　4.写页面的js代码

  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>");
                     }
                 }
             }
             $(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) {
                                 alert(data)
                                 alert(JSON.stringify(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();
                         }
                     });
                 });
             });
         });
     },
     

　　然后效果为：

　　

　　OK!!!