jquery使用ajax方式上传附件

一) 项目上需要,要用到jquery使用ajax方式上传附件的方式。 

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

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

Html代码  jquery使用ajax方式上传附件
  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代码  jquery使用ajax方式上传附件
  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代码  jquery使用ajax方式上传附件
  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. })  

相关推荐