JQuery ajaxfileupload上传文件

var content = "<div id='uploadPriceDiv' style='width:300px;height:100px'><input id='priceExcel' type='file' name='priceExcel'><input id='uploadPrice' type='button' value='上传'/></div>";
						$.Zebra_Dialog(content, {
							'type' : false,
							'title' : '上传文件',
							'buttons' : false,
						});
						$("#uploadPrice").on('click', function() {
							$.ajaxFileUpload({
								url : "prod/prodPriceAction!importPrice?prodId=" + prod.prodId,
								secureuri : false,
								fileElementId : 'priceExcel',
								<span style="color:#ff0000;">dataType : 'JSON',</span>
								complete : function() {
								},
								success : function(data, status) {
									$(".ZebraDialogOverlay, .ZebraDialog").remove();
									<span style="color:#ff0000;">data = JSON.parse(data);</span>
									$.Zebra_Dialog(data.imp, {
										'type' : 'information',
										'title' : '导入结果',
									});
								},
								error : function(data, status, e) {
									alert(e);
								},
							});
						});

在本例子中,直接通过js生成上传对话框,现在主要对红色部分进行一些问题说明:

(1)类似"Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'"的问题:这个是google浏览器报的错误，非常经典， 不知道是版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是：dataType参数一定要大写。如：dataType: 'JSON'。

另有网上做法，未实验过，不知是否可行：由于JQuery在1.5版本后就废除了handleError方法，因此需要在ajaxfileupload中自己添加handleError方法，方法如下：

<span style="color:#333333;">handleError: function( s, xhr, status, e ) {
    // If a local callback was specified, fire it
    if ( s.error ) {
        s.error.call( s.context || window, xhr, status, e );
    }

    // Fire the global callback
    if ( s.global ) {
        (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
    }
}</span>

(2)尽管dataType已经是JSON，但是实际上从后台传过来的data还不是json格式，而是"{"imp":"导入成功！"}"，所以要进行数据的再次格式化，为Object {imp: "导入成功！"}。

<span style="color:#222222;">@Controller("prodPriceAction")
@Scope("prototype")
public class ProdPriceAction extends ActionSupport implements SessionAware, ServletRequestAware, ServletResponseAware{
	private static final long serialVersionUID = 1L;
	private HttpServletResponse resp;
	private HttpServletRequest req;
	private Map<String, Object> sessionMap;
	private File priceExcel;

	public void importPrice() {
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("imp", "导入失败！");
		XSSFWorkbook wb = null;
		PrintWriter pw = null;
		try {
			String prodId = req.getParameter("prodId");
			wb = new XSSFWorkbook(new FileInputStream(priceExcel));
			if (prodPriceService.importPrice(prodId, wb)) {
				jsonObject.put("imp", "导入成功！");
			}
			</span><span style="color:#ff0000;">resp.setContentType("text/html;charset=UTF-8");</span><span style="color:#222222;">
			pw = resp.getWriter();
			pw.print(jsonObject);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pw.close();
		}

	}

	@Override
	public void setServletResponse(HttpServletResponse arg0) {
		resp = arg0;
		this.resp.setCharacterEncoding("UTF-8");
	}

	@Override
	public void setServletRequest(HttpServletRequest arg0) {
		req = arg0;
	}

	@Override
	public void setSession(Map<String, Object> paramMap) {
		this.sessionMap = paramMap;
	}

	public File getPriceExcel() {
		return priceExcel;
	}

	public void setPriceExcel(File priceExcel) {
		this.priceExcel = priceExcel;
	}
}
</span>

对红色部分的解释：

上传File时，浏览器总是添加<pre>的解决办法

       在使用Structs的FileUpload组件进行上传文件的时候，在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签，例如返回内容为"{\"message\":\"导入文件已成功\",\"result\":\"OK\"}",在浏览器里面就变成了"<pre style="word-wrap: break-word; white-space: pre-wrap;">"{\"message\":\"导入文件已成功\",\"result\":\"OK\"}"</pre>"，这样就导致Ajax解析返回值的时候出现错误。

解决办法都是把response的返回类型设置为【text/html】