如何让ajaxfileupload.js支持IE9，IE10，并可以传递多个参数？-白红宇

如何让ajaxfileupload.js支持IE9，IE10，并可以传递多个参数？

阅读量：5934 次

发布时间：2019-06-19

本文共 10215 字，大约阅读时间需要 34 分钟。

exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5)

思路分析：

第一步：兼容IE9，firefox，Opera，Safari等浏览器；

var iframe = document.createElement("iframe");

iframe.setAttribute("id", "yui-history-iframe");

iframe.setAttribute("src", "../../images/defaults/transparent-pixel.gif");

iframe.setAttribute("style","position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;")

第二步：兼容IE6-8：由于ie6-8 不能修改iframe的name属性

var oFrame = isIE ? document.createElement("<iframe name=/"" + this._FrameName + "/">") : document.createElement("iframe");

oFrame.name = "iframName";

1、如何让ajaxfileupload.js支持IE9、IE10？

打开ajaxfileupload 文件，找到下面的代码。

[javascript]

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;

}

}

修改成如下：

[javascript]

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;

}

}

}

2、如何让ajaxfileupload.js可以在文件上传的同时传递多个台数。

找到以下代码：

[javascript]

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);

增加自己要传递的参数:

[javascript]

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

接着找到：

[javascript]

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;

注意注释中的内容为增加了内容。

修改完后，如何使用？

[javascript]

$.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){}

//以下省略

OK，done.

附ajaxfileupload完整版：

[javascript]

jQuery.extend({

createUploadIframe: function(id, uri)

{

//create frame

var frameId = 'jUploadFrame' + id;

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;

// }

//fix ie9 and ie 10-------------

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;

}

}

}

else {

var io = document.createElement('iframe');

io.id = frameId;

io.name = frameId;

}

io.style.position = 'absolute';

io.style.top = '-1000px';

io.style.left = '-1000px';

document.body.appendChild(io);

return io

createUploadForm: function(id, fileElementId, 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: 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);

var io = jQuery.createUploadIframe(id, s.secureuri);

var frameId = 'jUploadFrame' + id;

var formId = 'jUploadForm' + id;

// Watch for a new set of requests

if ( s.global && ! jQuery.active++ )

{

jQuery.event.trigger( "ajaxStart" );

}

var requestDone = false;

// Create the request object

var xml = {}

if ( s.global )

jQuery.event.trigger("ajaxSend", [xml, s]);

// Wait for a response to come back

var uploadCallback = function(isTimeout)

{

var io = document.getElementById(frameId);

{

if(io.contentWindow)

{

xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;

xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

}else if(io.contentDocument)

{

xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;

xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;

}

}catch(e)

{

jQuery.handleError(s, xml, null, e);

}

if ( xml || isTimeout == "timeout")

{

requestDone = true;

var status;

try {

status = isTimeout != "timeout" ? "success" : "error";

// Make sure that the request was successful or notmodified

if ( status != "error" )

{

// process the data (runs the xml through httpData regardless of callback)

var data = jQuery.uploadHttpData( xml, s.dataType );

// If a local callback was specified, fire it and pass it the data

if ( s.success )

s.success( data, status );

// Fire the global callback

if( s.global )

jQuery.event.trigger( "ajaxSuccess", [xml, s] );

} else

jQuery.handleError(s, xml, status);

} catch(e)

{

status = "error";

jQuery.handleError(s, xml, status, e);

}

// The request was completed

if( s.global )

jQuery.event.trigger( "ajaxComplete", [xml, s] );

// Handle the global AJAX counter

if ( s.global && ! --jQuery.active )

jQuery.event.trigger( "ajaxStop" );

// Process result

if ( s.complete )

s.complete(xml, status);

jQuery(io).unbind()

setTimeout(function()

{ try

{

$(io).remove();

$(form).remove();

} catch(e)

{

jQuery.handleError(s, xml, null, e);

}

}, 100)

xml = null

}

}

// Timeout checker

if ( s.timeout > 0 )

{

setTimeout(function(){

// Check to see if the request is still happening

if( !requestDone ) uploadCallback( "timeout" );

}, s.timeout);

}

{

// var io = $('#' + frameId);

var form = $('#' + formId);

$(form).attr('action', s.url);

$(form).attr('method', 'POST');

$(form).attr('target', frameId);

if(form.encoding)

{

form.encoding = 'multipart/form-data';

}

else

{

form.enctype = 'multipart/form-data';

}

$(form).submit();

} catch(e)

{

jQuery.handleError(s, xml, null, e);

}

if(window.attachEvent){

document.getElementById(frameId).attachEvent('onload', uploadCallback);

}

else{

document.getElementById(frameId).addEventListener('load', uploadCallback, false);

}

return {abort: function () {}};

uploadHttpData: function( r, type ) {

var data = !type;

data = type == "xml" || data ? r.responseXML : r.responseText;

// If the type is "script", eval it in global context

if ( type == "script" )

jQuery.globalEval( data );

// Get the JavaScript object, if JSON is used.

if ( type == "json" )

eval( "data = " + data );

// evaluate scripts within html

if ( type == "html" )

jQuery("<div>").html(data).evalScripts();

//alert($('param', data).each(function(){alert($(this).attr('value'));}));

return data;

}

})

转载：

转载于:https://my.oschina.net/winHerson/blog/144974

你可能感兴趣的文章

Android6.0机型上调用系统相机拍照返回的resultCode值始终等于0的问题

让我们荡起双桨，Android 小船波浪动画

查看>>

ApacheCN 翻译活动进度公告 2019.2.18

查看>>

分布式memcached服务器代理magent安装配置（CentOS6.6）

查看>>

Create Volume 操作（Part III） - 每天5分钟玩转 OpenStack（52）

查看>>

Polar码引发舆论狂欢 5G标准远未定局

查看>>

KSImageNamed-Xcode-master

轻松实现基于Heartbeat的高可用web服务集群