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】