加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 22:03:20 所属栏目：百科 来源：网络整理
导读：exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5) 思路分析： 第一步：兼容IE9，firefox，Opera，Safari等浏览器； var iframe = document.createElement("iframe"); iframe.setAttribute("id","yui-history-iframe"); iframe.setAttribut

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
  1. if(window.ActiveXObject){
  2. vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');
  3. if(typeofuri=='boolean'){
  4. io.src='javascript:false';
  5. }
  6. elseif(typeofuri=='string'){
  7. io.src=uri;
  8. }
  9. }
修改成如下：
[javascript] view plain copy
  1. if(window.ActiveXObject){
  2. if(jQuery.browser.version=="9.0"||jQuery.browser.version=="10.0"){
  3. vario=document.createElement('iframe');
  4. io.id=frameId;
  5. io.name=frameId;
  6. }elseif(jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"||jQuery.browser.version=="8.0"){
  7. vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');
  8. if(typeofuri=='boolean'){
  9. io.src='javascript:false';
  10. }
  11. elseif(typeofuri=='string'){
  12. io.src=uri;
  13. }
  14. }
  15. }

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

找到以下代码：

[javascript] view plain copy
  1. ajaxFileUpload:function(s){
  2. //TODOintroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout
  3. s=jQuery.extend({},jQuery.ajaxSettings,s);
  4. varid=newDate().getTime()
  5. varform=jQuery.createUploadForm(id,s.fileElementId);
增加自己要传递的参数:
[javascript] view plain copy
  1. ajaxFileUpload:function(s){
  2. //TODOintroduceglobalsettings,s.fileElementId,s.tag_name,s.tag_link,s.tag_sort,s.tag_status,s.tag_id);
这里我们增加了五个传递参数。s.tag_name,s.tag_id

接着找到：

[javascript] view plain copy
  1. createUploadForm:function(id,fileElementId,tag_name,tag_link,tag_sort,tag_status,tag_id)//增加tag_name,tag_id
  2. {
  3. //createform
  4. varformId='jUploadForm'+id;
  5. varfileId='jUploadFile'+id;
  6. //--增加以下内容
  7. vartagNameId='tag_name'+id;
  8. vartagLinkId='tag_link'+id;
  9. vartagSortId='tag_sort'+id;
  10. vartagStatusId='tag_status'+id;
  11. vartagIdId='tag_id'+id;
  12. //--end
  13. varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
  14. varoldElement=$('#'+fileElementId);
  15. varnewElement=$(oldElement).clone();
  16. //--增加以下内容
  17. vartagNameElement='<inputtype="text"name="tag_name"value="'+tag_name+'">';
  18. vartagLinkElement='<inputtype="text"name="tag_link"value="'+tag_link+'">';
  19. vartagSortElement='<inputtype="text"name="tag_sort"value="'+tag_sort+'">';
  20. vartagStatusElement='<inputtype="text"name="tag_status"value="'+tag_status+'">';
  21. vartagIdElement='<inputtype="text"name="tag_id"value="'+tag_id+'">';
  22. //--end
  23. $(oldElement).attr('id',fileId);
  24. $(oldElement).before(newElement);
  25. $(oldElement).appendTo(form);
  26. //--增加以下的内容
  27. $(tagNameElement).appendTo(form);
  28. $(tagLinkElement).appendTo(form);
  29. $(tagSortElement).appendTo(form);
  30. $(tagStatusElement).appendTo(form);
  31. $(tagIdElement).appendTo(form);
  32. //--end
  33. //setattributes
  34. $(form).css('position','absolute');
  35. $(form).css('top','-1200px');
  36. $(form).css('left','-1200px');
  37. $(form).appendTo('body');
  38. returnform;
  39. },
注意注释中的内容为增加了内容。

修改完后，如何使用？

[javascript] view plain copy
  1. $.ajaxFileUpload({
  2. url:web_url,
  3. secureuri:false,
  4. //以下为增加的传递参数
  5. tag_name:tag_name,
  6. tag_link:tag_link,
  7. tag_sort:tag_sort,
  8. tag_status:tag_status,
  9. tag_id:tag_id,
  10. //--end
  11. fileElementId:result[0],
  12. dataType:'json',
  13. success:function(data,status){}
  14. //以下省略

OK，done.


附ajaxfileupload完整版：

[javascript] view plain copy
  1. jQuery.extend({
  4. createUploadIframe:function(id,uri)
  5. {
  6. //createframe
  7. varframeId='jUploadFrame'+id;
  9. if(window.ActiveXObject){
  10. //vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');
  11. //if(typeofuri=='boolean'){
  12. //io.src='javascript:false';
  13. //}
  14. //elseif(typeofuri=='string'){
  15. //io.src=uri;
  16. //}
  18. //fixie9andie10-------------
  19. if(jQuery.browser.version=="9.0"||jQuery.browser.version=="10.0"){
  20. vario=document.createElement('iframe');
  21. io.id=frameId;
  22. io.name=frameId;
  23. }elseif(jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"||jQuery.browser.version=="8.0"){
  24. vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');
  25. if(typeofuri=='boolean'){
  26. io.src='javascript:false';
  27. }
  28. elseif(typeofuri=='string'){
  29. io.src=uri;
  30. }
  31. }
  32. }
  33. else{
  34. vario=document.createElement('iframe');
  35. io.id=frameId;
  36. io.name=frameId;
  37. }
  38. io.style.position='absolute';
  39. io.style.top='-1000px';
  40. io.style.left='-1000px';
  42. document.body.appendChild(io);
  44. returnio
  45. },
  46. createUploadForm:function(id,tag_id)
  47. {
  48. //createform
  49. varformId='jUploadForm'+id;
  50. varfileId='jUploadFile'+id;
  51. //--
  52. vartagNameId='tag_name'+id;
  53. vartagLinkId='tag_link'+id;
  54. vartagSortId='tag_sort'+id;
  55. vartagStatusId='tag_status'+id;
  56. vartagIdId='tag_id'+id;
  57. //--end
  58. varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
  59. varoldElement=$('#'+fileElementId);
  60. varnewElement=$(oldElement).clone();
  61. //--
  62. vartagNameElement='<inputtype="text"name="tag_name"value="'+tag_name+'">';
  63. vartagLinkElement='<inputtype="text"name="tag_link"value="'+tag_link+'">';
  64. vartagSortElement='<inputtype="text"name="tag_sort"value="'+tag_sort+'">';
  65. vartagStatusElement='<inputtype="text"name="tag_status"value="'+tag_status+'">';
  66. vartagIdElement='<inputtype="text"name="tag_id"value="'+tag_id+'">';
  67. //--end
  68. $(oldElement).attr('id',fileId);
  69. $(oldElement).before(newElement);
  70. $(oldElement).appendTo(form);
  71. //--
  72. $(tagNameElement).appendTo(form);
  73. $(tagLinkElement).appendTo(form);
  74. $(tagSortElement).appendTo(form);
  75. $(tagStatusElement).appendTo(form);
  76. $(tagIdElement).appendTo(form);
  77. //--end
  78. //setattributes
  79. $(form).css('position',
  81. ajaxFileUpload:function(s){
  82. //TODOintroduceglobalsettings,s.tag_id);
  83. vario=jQuery.createUploadIframe(id,s.secureuri);
  84. varframeId='jUploadFrame'+id;
  85. varformId='jUploadForm'+id;
  86. //Watchforanewsetofrequests
  87. if(s.global&&!jQuery.active++)
  88. {
  89. jQuery.event.trigger("ajaxStart");
  90. }
  91. varrequestDone=false;
  92. //Createtherequestobject
  93. varxml={}
  94. if(s.global)
  95. jQuery.event.trigger("ajaxSend",[xml,s]);
  96. //Waitforaresponsetocomeback
  97. varuploadCallback=function(isTimeout)
  98. {
  99. vario=document.getElementById(frameId);
  100. try
  101. {
  102. if(io.contentWindow)
  103. {
  104. xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
  105. xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
  107. }elseif(io.contentDocument)
  108. {
  109. xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
  110. xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
  111. }
  112. }catch(e)
  113. {
  114. jQuery.handleError(s,xml,null,e);
  115. }
  116. if(xml||isTimeout=="timeout")
  117. {
  118. requestDone=true;
  119. varstatus;
  120. try{
  121. status=isTimeout!="timeout"?"success":"error";
  122. //Makesurethattherequestwassuccessfulornotmodified
  123. if(status!="error")
  124. {
  125. //processthedata(runsthexmlthroughhttpDataregardlessofcallback)
  126. vardata=jQuery.uploadHttpData(xml,s.dataType);
  127. //Ifalocalcallbackwasspecified,fireitandpassitthedata
  128. if(s.success)
  129. s.success(data,status);
  131. //Firetheglobalcallback
  132. if(s.global)
  133. jQuery.event.trigger("ajaxSuccess",s]);
  134. }else
  135. jQuery.handleError(s,status);
  136. }catch(e)
  137. {
  138. status="error";
  139. jQuery.handleError(s,status,e);
  140. }
  142. //Therequestwascompleted
  143. if(s.global)
  144. jQuery.event.trigger("ajaxComplete",s]);
  146. //HandletheglobalAJAXcounter
  147. if(s.global&&!--jQuery.active)
  148. jQuery.event.trigger("ajaxStop");
  150. //Processresult
  151. if(s.complete)
  152. s.complete(xml,status);
  154. jQuery(io).unbind()
  156. setTimeout(function()
  157. {try
  158. {
  159. $(io).remove();
  160. $(form).remove();
  162. }catch(e)
  163. {
  164. jQuery.handleError(s,e);
  165. }
  167. },100)
  169. xml=null
  171. }
  172. }
  173. //Timeoutchecker
  174. if(s.timeout>0)
  175. {
  176. setTimeout(function(){
  177. //Checktoseeiftherequestisstillhappening
  178. if(!requestDone)uploadCallback("timeout");
  179. },s.timeout);
  180. }
  181. try
  182. {
  183. //vario=$('#'+frameId);
  184. varform=$('#'+formId);
  185. $(form).attr('action',s.url);
  186. $(form).attr('method','POST');
  187. $(form).attr('target',frameId);
  188. if(form.encoding)
  189. {
  190. form.encoding='multipart/form-data';
  191. }
  192. else
  193. {
  194. form.enctype='multipart/form-data';
  195. }
  196. $(form).submit();
  198. }catch(e)
  199. {
  200. jQuery.handleError(s,e);
  201. }
  202. if(window.attachEvent){
  203. document.getElementById(frameId).attachEvent('onload',uploadCallback);
  204. }
  205. else{
  206. document.getElementById(frameId).addEventListener('load',uploadCallback,false);
  207. }
  208. return{abort:function(){}};
  210. },
  212. uploadHttpData:function(r,type){
  213. vardata=!type;
  214. data=type=="xml"||data?r.responseXML:r.responseText;
  215. //Ifthetypeis"script",evalitinglobalcontext
  216. if(type=="script")
  217. jQuery.globalEval(data);
  218. //GettheJavaScriptobject,ifJSONisused.
  219. if(type=="json")
  220. eval("data="+data);
  221. //evaluatescriptswithinhtml
  222. if(type=="html")
  223. jQuery("<div>").html(data).evalScripts();
  224. //alert($('param',data).each(function(){alert($(this).attr('value'));}));
  225. returndata;
  226. }
  227. })
转载：http://www.52php.cn/article/p-xjquddto-gy.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同