使用ajaxfileupload.js上傳文件

　　一直以來上傳文件都是使用form表單上傳文件，也看到過有人使用js上傳文件，不過看起來蠻簡單的也就沒有怎麼去理會。今天忽然要使用這種方式上傳文件，期間還遇到點問題。所以就記錄下來，方便之後遇到這樣的問題能夠查看。

　　首先就是引入js和ajaxfileupload的文件，這個不須要多說。

　　而後就是ajax請求後臺地址。代碼以下：

 <div class="btn-file-box pos-rel">
      <input type="file" id="upload" name="upload"  style="font-size: 0;opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;"/>
 <span class="btn ">選擇文件</span>
 </div>

$("#upload").on("change",function(){
        $.ajaxFileUpload({
            url : '/test/user/imgUpload',//後臺請求地址
            type: 'post',//請求方式  當要提交自定義參數時，這個參數要設置成post
            secureuri : false,//是否啓用安全提交，默認爲false。 
            fileElementId : 'upload',// 須要上傳的文件域的ID，即<input type="file">的ID。
            dataType : 'json',//服務器返回的數據類型。能夠爲xml,script,json,html。若是不填寫，jQuery會自動判斷。若是json返回的帶pre,這裏修改成json便可解決。
            success : function (json, status) {//提交成功後自動執行的處理函數，參數data就是服務器返回的數據。
                  alert(json.retMsg);
            },
            error : function (json, status, e) {//提交失敗自動執行的處理函數。
                
            }
        });
    });

　　前臺代碼完成就開始開發後臺代碼了。

　　

package com.roc.test;import java.io.File;
import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.ws.rs.Consumes; import javax.ws.rs.POST; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.QueryParam; import javax.ws.rs.core.Context; import javax.ws.rs.core.MediaType; import net.sf.json.JSONObject; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.jboss.resteasy.annotations.providers.jaxb.json.BadgerFish; import org.springframework.stereotype.Controller;
import net.sf.json.JSONObject;
/** * 上傳文件 * @author liaowp * */ @Controller @Path("/user") public class UploadImg { @Path("/imgUpload") @POST @Produces("application/json; charset=utf-8") @Consumes(MediaType.MULTIPART_FORM_DATA ) @BadgerFish public JSONObject upload(@QueryParam("orderId") String orderId,@Context HttpServletRequest request,@Context HttpServletResponse response) { JSONObject jsonobj = new JSONObject(); String file_path=request.getSession().getServletContext().getRealPath("/")+File.separator+"corpfile"+File.separator;//文件存儲路徑  String upload_file_path=""; File file =new File(file_path); if(!file.exists() && !file.isDirectory()){ //若是文件夾不存在則建立   file.mkdir(); upload_file_path=file_path; }else{ upload_file_path=file_path; } DiskFileItemFactory factory = new DiskFileItemFactory(); // 設置工廠  factory.setRepository(new File(file_path));// 設置文件存儲位置 factory.setSizeThreshold(2048 * 1024);// 設置大小，若是文件小於設置大小的話，放入內存中，若是大於的話則放入磁盤中 ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("utf-8");// 這裏就是中文文件名處理的代碼，其實只有一行 String fileName = ""; List<FileItem> list; JSONObject jsonobj = new JSONObject(); try { list = upload.parseRequest(request); for (FileItem item : list) { if (item.isFormField()) { String name = item.getFieldName(); String value = item.getString("utf-8"); } else { String name = item.getFieldName(); String value = item.getName(); fileName =name + ".jpg"; if (item.getSize() > 10485760) {//您好，上傳文件要小於10M！ jsonobj.put("retCode","100"); jsonobj.put("retMsg","您好，上傳文件要小於10M！"): } else {//上傳成功 item.write(new File(upload_file_path, fileName)); System.out.println(File.separator + "corpfile" + File.separator + fileName); jsonobj.put("retCode","0"); jsonobj.put("retMsg","您好，上傳成功！"); } } } } catch (Exception e) {//上傳失敗  e.printStackTrace(); jsonobj.put("retCode","9999");
　　　　　　　jsonobj.put("retMsg","您好，文件上傳失敗，");
 } return jsonobj; } }

 存在問題：

　　　　IE下有的瀏覽器會存在返回的值變爲下載json文件的問題，把dataType修改成text，後臺代碼的請求類型也修改成text/html; charset=utf-8以及返回的頭也是text/html; charset=utf-8