ajaxfileupload.js不支持IE9，IE10的解決方案

                             ajaxfileupload.js不支持IE9，IE10的解決方案

 

   在項目開發中，經常會利用ajax來實現異步文件上傳。在IE9以前的IE瀏覽器，對ajaxfileupload.js支持都非常好，但到了IE9、

IE10年代，這種異步文件上傳的動作戛然而止，無論點擊多少次“上傳”按鈕，頁面也好，服務端程序也好，都沒有任何反應。

   那問題到底出現在哪裏呢？我們來仔細研究一下ajaxfileupload.js的代碼，找到如下源代碼段：

 

if(window.ActiveXObject) {
    var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
     if(typeof uri== 'boolean'){
         io.src = 'javascript:false';
     }
     else if(typeof uri== 'string'){
         io.src = uri;
     }
 }

   而IE9乃至IE10都不支持上述的處理方式，可以修改爲以下的處理方式，就能解決無法上傳文件的問題。

if(window.ActiveXObject) {
   if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){
    	var io = document.createElement('iframe');
    	io.id = frameId;
    	io.name = frameId;
    }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){
    	var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
    	if(typeof uri== 'boolean'){
    	    io.src = 'javascript:false';
    	}
    	else if(typeof uri== 'string'){
    	    io.src = uri;
    	}
    }
}

附：

 

   如何讓ajaxfileupload.js可以在文件上傳的同時傳遞多個參數呢？

   找到以下代碼：

ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
	var form = jQuery.createUploadForm(id, s.fileElementId);

增加自己要傳遞的參數:

ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout		
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
	var form = jQuery.createUploadForm(id, s.fileElementId, s.tag_name, s.tag_link, s.tag_sort, s.tag_status, s.tag_id);

這裏我們增加了五個傳遞參數。 s.tag_name, s.tag_link, s.tag_sort, s.tag_status, s.tag_id

接着找到：

createUploadForm: function(id, fileElementId, tag_name, tag_link, tag_sort, tag_status, tag_id)//增加tag_name, tag_link, tag_sort, tag_status, tag_id
	{
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		//--增加以下內容
		var tagNameId = 'tag_name' + id;
		var tagLinkId = 'tag_link' + id;
		var tagSortId = 'tag_sort' + id;
		var tagStatusId = 'tag_status' + id;
		var tagIdId = 'tag_id' + id;
		//--end
		var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
		var oldElement = $('#' + fileElementId);
		var newElement = $(oldElement).clone();
		//--增加以下內容
		var tagNameElement = '<input type="text" name="tag_name" value="'+tag_name+'">';  
		var tagLinkElement = '<input type="text" name="tag_link" value="'+tag_link+'">';
		var tagSortElement = '<input type="text" name="tag_sort" value="'+tag_sort+'">';
		var tagStatusElement = '<input type="text" name="tag_status" value="'+tag_status+'">';
		var tagIdElement = '<input type="text" name="tag_id" value="'+tag_id+'">';
		//--end
		$(oldElement).attr('id', fileId);
		$(oldElement).before(newElement);
		$(oldElement).appendTo(form);
		//--增加以下的內容
		$(tagNameElement).appendTo(form);
		$(tagLinkElement).appendTo(form);
		$(tagSortElement).appendTo(form);
		$(tagStatusElement).appendTo(form);
		$(tagIdElement).appendTo(form);
		//--end
		//set attributes
		$(form).css('position', 'absolute');
		$(form).css('top', '-1200px');
		$(form).css('left', '-1200px');
		$(form).appendTo('body');		
		return form;
    },

注意註釋中的內容爲增加了內容。

修改完後，如何使用？ 

 $.ajaxFileUpload({
        url:web_url,
        secureuri:false,
        //以下爲增加的傳遞參數
        tag_name:tag_name,
	tag_link:tag_link,
	tag_sort:tag_sort,
	tag_status:tag_status,
	tag_id:tag_id,
        //--end
        fileElementId:result[0],
        dataType: 'json',
        success: function (data,status){}
        //以下省略