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){}
        //以下省略


 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值