jquery使用ajax方式上传附件

一) 项目上需要，要用到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. })  

一) 项目上需要，要用到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. })