最近做專案，需要上傳表單元素中的檔案POST到目標URL，並把得到的資料顯示到本頁面上，而不跳轉到目標URL。那麼，現在就要明確兩件事：

1）不能直接提交表單，因為一旦點選submit就會自動跳轉到action介面；

2）可以選擇ajax進行非同步資料傳輸；

      原來只是用過ajax進行簡單的資料傳輸，還沒上傳過檔案吶，於是查了一下，如獲至寶地發現了jQuery外掛AjaxFileupload，專門用來上傳檔案~於是乎就馬上踏上了AjaxFileupload的研究之旅。

一、實現步驟：

1）引入相關的js

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
 

2）程式碼編寫

$.ajaxFileUpload({
		url: "../GetInfo.jsp",//處理本檔案的action
		secureuri: false,
		fileElementId: 'uploadFile1', //input type="file"的id
		dataType: 'json',//定義資料的返回格式是json
		success: function (data, status) {  
			console.log(data);
            if(typeof(data.error) != 'undefined') {  
                if(data.error != '') {  
                    alert(data.error);  
                } else {  
                    alert(data.msg);  
                }  
            }  
			FillTable(data);
        },  
        error: function (data, status, e) {  
            alert(e);  
        }  
    });
 

二、遇到的問題總結：

1）使用的AjaxFileupload版本與jQuery版本不相同導致報錯

一開始使用的是jQuery-2.1.4版本，後來報錯了，查了原因發現可能是版本不同，才發現AjaxFileupload的版本是1.2的（真是一個老古董），不過沒辦法，為了上傳檔案還是忍忍吧，就把jQuery版本換成了和它一樣的老古董。然後問題解決~（AjaxFileupload版本與jQuery版本不用嚴格相同，但是也不能差太多）

2）AjaxFileupload檔案上傳成功但是不執行回撥函式

修改ajaxfileupload.js原始碼，把最後幾行程式碼中的程式碼

if ( type == "json" )
            eval( "data = " + data );

if ( type == "json" )
            data=eval("("+data.replace("<pre>","").replace("</pre>","")+")");

3）控制檯報錯jQuery.handleError is not a function

現在大家至少也在用jquery1.9以上的版本，ajaxfileupload的版本早就不更新了，它例子裡使用的Jquery是1.2的，好老呀。。。這個問題，我以前開發過程中遇過，網上說經測試（我是沒測試），是版本1.4.2之後的版本才有handlerError方法，之前就不存在了，為了能夠繼續使用ajaxfileupload上傳我們的附件，只好將程式碼拷進我們的專案中的ajaxfileupload.js檔案中，如下：

handleError: function( s, xhr, status, e ) 		{
    	// If a local callback was specified, fire it
    			if ( s.error ) {
    				s.error.call( s.context || s, xhr, status, e );
    			}

    			// Fire the global callback
    			if ( s.global ) {
    				(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
    			}
    }

4）AjaxFileupload上傳多檔案的實現

修改ajaxfileupload.js原始碼，

//var oldElement = jQuery('#' + fileElementId);
//var newElement = jQuery(oldElement).clone();
//jQuery(oldElement).attr('id', fileId);
//jQuery(oldElement).before(newElement);
//jQuery(oldElement).appendTo(form);
  //set attributes
	for(var i in fileElementId)
	{    
	      var oldElement = jQuery('#' + fileElementId[i]); 
		  var newElement = jQuery(oldElement).clone();    
	      jQuery(oldElement).attr('id', fileId);    
	      jQuery(oldElement).before(newElement);    
	      jQuery(oldElement).appendTo(form);    
	      });      
	}