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

Posted 2023-04-24

参考技术A 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] view plain copy

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] view plain copy

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] view plain copy

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] view plain copy

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] view plain copy

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.js异步提交图片

碰到问题的解决方法：http://blog.yadgen.com/?p=970

 

<script type="text/javascript" src="_LIB_/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="_JS_/jquery.ajaxfileupload.js"></script>

$(function () {
 2 //照片异步上传
 3 $(‘#inputImage‘).on("change",function () { //此处用了change事件，当选择好图片打开，关闭窗口时触发此事件
 4 $.ajaxFileUpload({
 5 url: "<{:url(‘index/Article/imgUpload‘)}>", //处理图片的脚本路径
 6 type: ‘post‘, //提交的方式
 7 secureuri: false, //是否启用安全提交
 8 fileElementId: ‘inputImage‘, //file控件ID
 9 dataType: ‘json‘, //服务器返回的数据类型
10 success: function (data, status) { //提交成功后自动执行的处理函数
11 $(".artImg").attr("src",data);
12 $("#imgYz").val(data);
13 },
14 error:function(e){
15 alert(1);
16 }
17 })
18 });
19 });    

    <p><label><span>封面图片：<input type="file" name = "artImg" id="inputImage"></span></label></p>
    <img src="" style="width:200px;" class="artImg img-rounded">
    <input style="display:none;" name="art_img" id="imgYz" type="text" value="">