本文簡單介紹利用Html5的FormData實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧

1 簡介

開發(fā)文件上傳功能從來不是一件愉快的事，異步上傳更是如此，使用過iframe和Flash的上傳方案，也都感覺十分的別扭。本文簡要簡紹利用Html5的FormData實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等。服務(wù)端使用springMVC的方案進(jìn)行處理。

2 Html代碼

<form id="myForm">      <input type="file" id="u_photo" name="u_photo" />      <input type="button" id="submit-btn" value="上傳" />  </form>

3 JQuery上傳

$("#submit-btn").on('click', function() {      $.ajax({          url:"/test/upload",          type:"post",          data:new FormData($("#myForm").get(0)),          //十分重要，不能省略          cache: false,          processData: false,          contentType: false,          success: function () {              alert("上傳成功！");          }      });  });

4 JQuery文件大小驗(yàn)證

文件大小的及相應(yīng)行為的控制，需根據(jù)需要自行處理，本方法只是示例方法。

$('#u_photo').on('change', function() {      var file = this.files[0];      if (file.size > 1024*1000) {          alert('文件最大1M！')      }  });

5 JQuery進(jìn)度條

在ajax方法中加入xhr即可控制上傳進(jìn)度，進(jìn)度條可以使用html5的progress也可使用其它的進(jìn)度條。顯示及隱藏進(jìn)度條需要自行處理，本方法只是簡單介紹了進(jìn)度條的基本控制。

xhr: function() {      var myXhr = $.ajaxSettings.xhr();      if (myXhr.upload) {          myXhr.upload.addEventListener('progress', function(e) {              if (e.lengthComputable) {                  $('progress').attr({                      value: e.loaded,                      max: e.total,                  });              }          } , false);      }      return myXhr;  }

6 springMVC服務(wù)端

6.1 maven依賴

<dependency>      <groupId>commons-io</groupId>      <artifactId>commons-io</artifactId>      <version>2.5</version>  </dependency>  <dependency>      <groupId>commons-fileupload</groupId>      <artifactId>commons-fileupload</artifactId>      <version>1.3.2</version>  </dependency>

6.2 servlet-context.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

6.3 Controller

示例程序，并未給出文件驗(yàn)證，存儲及處理的相應(yīng)代碼。

@RequestMapping(value="/test/upload",method = RequestMethod.POST)  @ResponseBody  public String upload(@RequestParam("u_photo") MultipartFile u_photo) {      System.out.println("u_photo="+u_photo.getSize());      return "ok";  }

7 兼容性

IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

8 推薦閱讀

如果對上述方案不滿意，推薦使用如下的解決方案：

JQuery File Uploader