最近都沒時間整理資料了，一入職就要弄懂業務，整天被業務弄得血崩。
總結下今天弄了一個早上的跨域異步上傳文件。主要用到技術有HTML5的FormData，AJAX，Spring MVC。
首先看下上傳頁面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/plugins/jquery-1.8.3.min.js" ></script> <title></title> </head> <body> <input type="file" id="file_upload"/> <input type="button" value="上傳圖片" id="upload"/> </body> <script type="text/javascript" src="js/upload.js" ></script> </html>
上傳頁面很簡單，就兩個input元素。
然后看下upload.js。注意這個upload.js是自己寫的，里面那個ajaxFileUpload並不是jQuery提供的那個上傳插件的方法。
$(document).ready(function(){ function ajaxFileUpload(){ var formData = new FormData(); formData.append('file',$("#file_upload")[0].files[0]); //將文件轉成二進制形式 $.ajax({ type:"post", url:"http://localhost:8080/nitshareserver/serve/fileupload", async:false, contentType: false, //這個一定要寫 processData: false, //這個也一定要寫，不然會報錯 data:formData, dataType:'text', //返回類型，有json，text，HTML。這里並沒有jsonp格式，所以別妄想能用jsonp做跨域了。 success:function(data){ alert(data); }, error:function(XMLHttpRequest, textStatus, errorThrown, data){ alert(errorThrown); } }); } $("#upload").click(function(){ ajaxFileUpload(); }); });
前端這樣就可以了，接下來看看服務端的寫法。
服務端接口寫法：
// @ResponseBody @RequestMapping(value="fileupload", method=RequestMethod.POST,produces="text/html;charset=utf-8") public void addPic(HttpServletResponse response,HttpServletRequest request, @RequestParam(value="file", required=false) MultipartFile file) throws IOException{ System.out.println(file.getOriginalFilename()); response.getWriter().write("success"); response.setHeader("Access-Control-Allow-Origin", "*"); // return "success"; }
這里response.setHeader("Access-Control-Allow-Origin", "*");這句很重要，沒有這句，前端接收不到返回的數據。Access-Control-Allow-Origin是HTML5中定義的一種服務器端返回Response header，用來解決資源（比如字體）的跨域權限問題。它定義了該資源允許被哪個域引用，或者被所有域引用（google字體使用*表示字體資源允許被所有域引用），但是在真正的產品中，是不會用*的。這里只是好方便演示。
那跑一下工程，看看前端會不會收到success吧。
結果：
服務端控制台：
