ajaxfileupload.js结合input[type=file]无刷新上传

jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。

说明：

语法：$.ajaxFileUpload([options])

　　options参数说明：

1、url　　　　　　　　　　 上传处理程序地址。　　

2，fileElementId　　　　　 需要上传的文件域的ID，即<input type="file">的ID。

3，secureuri　　　　　　　 是否启用安全提交，默认为false。

4，dataType　　　　　　　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。

5，success　　　　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。

6，error　　　　　　　　　 提交失败自动执行的处理函数。

7，data 　　　　　　　　　 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。

8, type 　　　　　　　　　 当要提交自定义参数时，这个参数要设置成post

错误提示:

1，SyntaxError: missing ; before statement错误

　　如果出现这个错误就需要检查url路径是否可以访问

2，SyntaxError: syntax error错误

　　如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误

3，SyntaxError: invalid property id错误

　　如果出现这个错误就需要检查文本域属性ID是否存在

4，SyntaxError: missing } in XML expression错误

　　如果出现这个错误就需要检查文件name是否一致或不存在

5，其它自定义错误

　　大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

1、引入其支持文件，注意引用顺序

<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/ajaxfileupload.js"></script>

2、在页面设置文件选择框，无需form包裹：注意此处id和name必须设置，在文章中你将知道原因，在此不做详细解释。

<input type="file" id="fileUpload" name="fileUploa" />

3、实现上传功能

<script type="text/javascript">
//初始化页面
$(document).ready(function(e) {

//选择文件框选择文件change事件
$("#fileUpload").change(function(){
var url=$(this).val();
var extend=url.substring(url.indexOf(".")+1);
var ext=new Array("jpg","jpeg","png","gif","bmp");
if(ext.toString().indexOf(extend)==-1){
alert("您上传的格式不正确，仅支持jpg、jpeg、png、gif、bmp,请重新选择！");
}

$.ajaxFileUpload({
url: '<%=basePath%>attach/api/upload', //后台提交地址
secureuri: false,//异步
fileElementId: 'fileUpload',//上传控件ID
dataType: 'json',//返回的数据信息格式
type:"post", //如果带附加参数，请设置type
success: function(data, status) {
if (data.success ==true) {
var attach=data.result[0];
$("[name=photo]").attr("src",attach.filePath);
alert("上传成功");
} else {
alert("服务器故障，稍后再试！");
}
}, error: function(data, status, e) {
alert(e);
}
});
});

});
</script>

4、后台接口：此处采用spring MVC

@RequestMapping(value = "/upload", method ={RequestMethod.POST,RequestMethod.GET})
@ResponseBody
public HashMap<String,Object> upload(HttpServletRequest request, HttpServletResponse response) 

throws InstantiationException, IllegalAccessException{
HashMap<String,Object> result=new HashMap<String,Object>();
ArrayList<Attach> attachList=attachService.uploadfy(request);
if(attachList.size()>0){
result.put("success", true);
result.put("result", attachList);
}else{
result.put("success", false);
}
return result;
}

5、实现以上步奏即可完成上传。

总结：

在使用过程中可能遇到如下问题：

1、上传报该异常：SyntaxError:Unexpected token <

原因：是因为Server端的Response上加上了contentType="application/json"。但有时后端这么做是必须的，所以修改ajaxFileUpload源码，将<pre></pre>标签去掉，如下：
（请参考：http://liwx2000.iteye.com/blog/1540321）

uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" ) {
////////////以下为新增代码///////////////
data = r.responseText;
var start = data.indexOf(">");
if(start != -1) {
var end = data.indexOf("<", start + 1);
if(end != -1) {
data = data.substring(start + 1, end);
}
}
///////////以上为新增代码///////////////
eval( "data = " + data);
}
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();

return data;
}

2、使用<input type="file" id="fileUpload" />该方式，在后台接收不到值？

原因：需要设置一下name属性 <input type="file" id="fileUpload" name="名称任意" />