AjaxFileUpload实现文件异步上传

AjaxFileUpload实现文件异步上传，本文对AjaxFileUpload上传遇到的问题进行完善，通过css隐藏“选择上传”按钮实现自定义上传按钮，
$.ajaxFileUpload(options)

options 主要的参数:
1)url:上传到服务端URL地址
2)fileElementId:上传的文件域的ID，即<input class='addfileI' type='file' name='upload-excel-file' id='upload-excel-file'>的upload-excel-file
3)dataType:服务端返回的数据类型，可以为xml,script,json,html，一般情况使用json
4)success:文件上传成功后AjaxFileUpload回调的函数
5) error:文件上传失败AjaxFileUpload回调的函数

AjaxFileUpload下载:ajaxfileupload.js

Ajaxfileupload异步上传

隐藏“选择上传”按钮

定义一个点击上传的按钮button，然后将文件域移动到定义按钮的位置，覆盖这个按钮即可，然后将文件域透明度设置为0

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<style>
.addfileI {
position:absolute;
left:0px;
font-size:26px;
background-color: blue;
opacity:0;
filter:alpha(opacity=0)
}
</style>
</head>
<body style="padding:50px;">
<input type="button" value="上传文件"/>
<a href="javascript:void(0)" style='height:38px;width:60px;position:absolute;top:58px;left:58px;z-index:0;overflow:hidden;'>
<input class='addfileI' type='file' name='upload-excel-file' id='upload-excel-file'>
</a>
</body>
</html>

文件域添加change事件

文件域添加change事件，改变文件域时执行上传文件功能

$("#upload-excel-file").bind("change", function() {
$.ajaxFileUpload({
url:"/form/file_parse.htm",
secureuri:false,
fileElementName:'upload-excel-file',
dataType: 'json',
success: function(data, status){
}, error: function (data, status, e) {
}
});
});

解析响应的数据

上面ajaxFileUpload文件上传之后会回调success函数或是error函数，参数data是服务端返回的数据，当dataType=json时，浏览器是google、firefox等服务端返回的JSON数据(data)会多了<pre></pre>如:<pre>{"code":0,"msg":""}</pre>，会造成上传成功但ajaxFileUpload解析json数据发生错误，这时回调的函数是error，这里修改了原来ajaxFileUpload.js的uploadHttpData方法，如下判断返回的JSON字符是否是<pre>开始
还有一个方法:经测试如果服务端返回的是String不是JSON对象，这时data数据不会带<pre></pre>

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") {
//suport chrome, firefox
var jsonString = data;
if(data.startWith("<pre")) {
jsonString = $(data).text();
}
data = eval('(' + jsonString + ')');
}
// evaluate scripts within html
if ( type == "html" ) {
jQuery("<div>").html(data).evalScripts();
}
return data;
}

html示例

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<style>
.addfileI {
position:absolute;
left:0px;
font-size:26px;
background-color: blue;
opacity:0;
filter:alpha(opacity=0)
}
</style>
</head>
<body style="padding:50px;">
<input type="button" value="上传文件" onclick="uploadFile()"/>
<a href="javascript:void(0)" style='height:38px;width:60px;position:absolute;top:58px;left:58px;z-index:0;overflow:hidden;'>
<input class='addfileI' type='file' name='upload-excel-file' id='upload-excel-file'>
</a>
</body>
<script>
$("#upload-excel-file").bind("change", function() {
$.ajaxFileUpload({
url:"/form/file_parse.htm",
secureuri:false,
fileElementName:'upload-excel-file',
dataType: 'json',
success: function(data, status){
}, error: function (data, status, e) {
}
});
});
</script>
</html>