html5 ajax Java接口 上传图片

html5图片上传【文件上传】
在网上找了很多资料，主要也就2种

1.from表单提交的方式

?

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

<form action="pushUserIcon" method="post" enctype="multipart/form-data">      <table>          <tr>              <td width="50" align=left>图片：</td>              <td><input type="file" name="file"/></td>                     </tr>          <tr>              <td width="50" align="left">用户id：</td>              <td><input type="text" name="userId"/></td>                     </tr>         <tr>             <td><input type="submit"> </td>         </tr>     </table>  </form>

　　注意：  enctype="multipart/form-data" 必须要填

1.1.Java页面直接提交：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

@RequestMapping(value="/pushUserIcon",method=RequestMethod.POST) @ResponseBody public String pushUserIcon(HttpServletRequest request, HttpServletResponse response) throws IOException,BaseException {        String result = null;     String userId = request.getParameter("userId");     try{         //转型为MultipartHttpRequest(重点的所在)          MultipartHttpServletRequest multipartRequest  =  (MultipartHttpServletRequest) request;          //获得第1张图片（根据前台的name名称得到上传的文件）           MultipartFile file  =  multipartRequest.getFile("file");         result = uploadImageServic.uploadFile(file, request, userId);                    System.out.println("result:" + result);          response.setContentType("text/html;charset=utf8");          response.getWriter().write("result:" + result);           }catch(Exception e){         BaseException baseException = new BaseException(e);         baseException.setErrorMsg("Upload API Exception");         throw baseException;     }           return  null;  }

　　

1.2.原生js 和jQuery的网上有很多，这里就不多说了。
1.2.1. fromData创建的两种方式

?

1 2 3 4 5 6

var formData = new FormData($("#myForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。                         //var formData = new FormData();//构造空对象，下面用append 方法赋值。  //       formData.append("policy", "");  //       formData.append("signature", "");  //       formData.append("file", $("#file_upload")[0].files[0]);

2.不用from表单提交：

?

1 2 3 4 5 6 7 8 9

<table style="border: 1px solid black; width: 100%">      <tr>             <td width="50" align=left>图片：</td>              <td><input type="file"  id="imageFile" name="img" multiple="multiple"/></td>             <td>                 <input type="button" value="调用" onclick="pushImg()" />             </td>         </tr>        </table>

HTML就这些，我想大家应该都能看懂，下面就要说说这2种提交方式，Ajax是如何编码？【from表单提交方式也可以使用js或者直接提交页面刷新】

Ajax编码也有2种：
1.原生js

?

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

function sub() {     var file = document.getElementById("imageFile");     var files = file.files;     for(var i = 0 ; i < files.length;i++)     {         uploadFile(files[i]);     } }   var xhr = null; function uploadFile(file) {     xhr = new XMLHttpRequest();    /*  xhr.addEventListener("error", uploadFailed, false);     xhr.addEventListener("abort", uploadCanceled, false); */     xhr.open("post", "upload/", true); //访问控制器是upload，后面必须加'/'否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.     var fd = new FormData();     fd.append("userID", "1");     fd.append("errDeviceType", "001");     fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af");     fd.append("errType", "001");     fd.append("errContent", "XXXXXX");     fd.append("errPic", file);     xhr.send(fd);     xhr.onreadystatechange = cb; } function cb() {     if(xhr.status == 200)     {         var b = xhr.responseText;         if(b == "success"){             alert("上传成功！");         }else{             alert("上传失败！");         }     } }

2.jquery

?

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

function pushImg(obj) {     debugger;     var url = "upload/"; //访问控制器是upload，后面必须加'/'否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.     var param = $("#errorParameter").val();       var files = $("#imageFile").get(0).files[0]; //获取file控件中的内容       var fd = new FormData();     fd.append("userID", "1");     fd.append("errDeviceType", "001");     fd.append("errDeviceID", "11761b4a-57bf-11e5-aee9-005056ad65af");     fd.append("errType", "001");     fd.append("errContent", "XXXXXX");     fd.append("errPic", files);     $.ajax({         type: "POST",         contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理         processData: false, //必须false才会自动加上正确的Content-Type          url: url,         data: fd,         success: function (msg) {             debugger;             var jsonString = JSON.stringify(msg);             $("#txtTd").text(jsonString)             alert(jsonString);         },         error: function (msg) {             debugger;             alert("error");         }     }); }

现在前端的就应该差不多了，现在就是接口了，我的参数和访问路径都好了，现在就差接口服务了：
spring mvc框架：

?

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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

@RequestMapping(value = { "upload" })         public void pushErrorData(HttpServletRequest request,                     HttpServletResponse response) throws BaseException {             String userID=request.getParameter("userID");                                                 // 转型为MultipartHttpRequest(重点的所在)这个就是上面ajax中提到如果直接访问此接口而不加"/"，此转型就会报错             MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;                               //MultipartFile file = multipartRequest.getFiles("errPic");//获取文件集合  对应  jquery $("#imageFile").get(0).files             // 获得第1张图片（根据前台的name名称得到上传的文件）             MultipartFile file = multipartRequest.getFile("errPic"); //对应  jquery $("#imageFile").get(0).files[index]             Map<String, Object> map = new HashMap<String, Object>();             if (null!=file && !file.isEmpty()) {                 try {                     map = Common.uploadFile(file);                                           } catch (IOException e) {                     BaseException baseException = new BaseException(e);                     //baseException.setErrorMsg(imgErrorMsg);                     throw baseException;                 }             }         }   /**      * 图片上传      *      * @param file      * @return      * @throws IOException      * @throws BaseException      */     public static Map<String, Object> uploadFile(MultipartFile file)             throws IOException, BaseException {         String fail = ConfigBundleHelper.getValue("busConfig", "fail");//上传失败状态         String success = ConfigBundleHelper.getValue("busConfig", "success");//上传成功状态         String errorMsg = ConfigBundleHelper.getValue("busConfig","imgErrorMsg");//上传错误信息         String filePath = ConfigBundleHelper.getValue("busConfig", "filePath");//上传路径，本来是相对路径，但是在发布后路径会创建在tomcat的bin目录下，所以接口上传的路径是一个难题，我用的是绝对路径，等到发布到Linux环境中，通过配置文件修改路径为Linux中的资源地址【防止工程删除而资源文件不会丢失】，然后重新发布工程时再通过Linux的命令把我们需要的资源文件导入到我们发布的工程项目中。         String size = ConfigBundleHelper.getValue("busConfig", "fileSize");         String interfaceService = ConfigBundleHelper.getValue("busConfig",                 "interfaceService");                   long maxFileSize = (Integer.valueOf(size)) * 1024 * 1024;         String suffix = file.getOriginalFilename().substring(                 file.getOriginalFilename().lastIndexOf("."));         long fileSize = file.getSize();         Map<String, Object> map = new HashMap<String, Object>();         if (suffix.equals(".png") || suffix.equals(".jpg")) {             if (fileSize < maxFileSize) {                 // System.out.println("fileSize"+fileSize);                 String fileName = file.getOriginalFilename();                 fileName = new String(fileName.getBytes("ISO-8859-1"), "UTF-8");                 File tempFile = new File(filePath, new Date().getTime()                         + fileName);                   try {                     if (!tempFile.getParentFile().exists()) {                         tempFile.getParentFile().mkdirs();//如果是多级文件使用mkdirs();如果就一层级的话，可以使用mkdir()                     }                     if (!tempFile.exists()) {                          tempFile.createNewFile();                     }                     file.transferTo(tempFile);                 } catch (IllegalStateException e) {                     BaseException baseException = new BaseException(e);                     baseException.setErrorMsg(errorMsg);                     throw baseException;                 }                   map.put("SUCESS", success);                 map.put("data",interfaceService + filePath + new Date().getTime() + tempFile.getName());               } else {                 map.put("SUCESS", fail);                 map.put("data", "Image too big");             }           } else {             map.put("SUCESS", fail);             map.put("data", "Image format error");         }         return map;     }

这是我在工作中所遇到到问题，分享给大家，希望大家不会在这个问题上花费大量的时间。谢谢