jquery使用ajax方式上传附件

经查找，得到一个名为ajaxFileUpload的插件。

翻阅官方文档发现用法简单。

Html代码  

1. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>  
2. <script type="text/javascript" src="js/ajaxfileupload.js"></script>  

Javascript代码  

1. $.ajaxFileUpload({  
2.     url: "teamwork/newTaskAttachmentUpload",  
3.     secureuri: false,  
4.     fileElementId: "attachment",  
5.     dataType: "json",  
6.     beforeSend: function() {  
7.           
8.     },  
9.     success: function(json) {  
10.         alert(json.fileName);  
11.     }  
12. });  

二)使用发现dataType设置成"json"时success指定的函数是不能响应的。

非常奇怪，经过Firebug调试得知，后端传来的json字符串被"<pre></pre>"包裹一下了。

如：{"name":"应卓","age":"30"}被包裹成了"<pre>{"name":"应卓","age":"30"}</pre>"

导致不能正确地生成json对象。

具体原因未知，有可能是这个插件与jquery1.7.2不兼容所致。

三)由于这个插件的源码不是gzip压缩版本，还有修改的可能。找出相对应的源码。

源码修改如下，可解决问题。

Javascript代码  

1.     // ......  
2.   
3.     uploadHttpData: function( r, type ) {  
4.         var data = !type;  
5.         data = type == "xml" || data ? r.responseXML : r.responseText;  
6.         // If the type is "script", eval it in global context  
7.         if ( type == "script" )  
8.             jQuery.globalEval( data );  
9.         // Get the JavaScript object, if JSON is used.  
10.         if ( type == "json" ) {  
11.             // -------------------------------------------------------------  
12.             // 哥修改的地方，加了一条语句。  
13.             data = data.substring(5, data.indexOf("</pre>"));  
14.             // -------------------------------------------------------------  
15.             eval( "data = " + data );  
16.         }  
17.         // evaluate scripts within html  
18.         if ( type == "html" )  
19.             jQuery("<div>").html(data).evalScripts();  
20.   
21.         return data;  
22.     }  
23. })