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
隐藏“选择上传”按钮
定义一个点击上传的按钮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>