前端图片异步上传

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;      }