AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Ajax作者：编程之家

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

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

找到以下代码：

[javascript] view plain copy
  1. ajaxFileUpload:@H_502_51@function(s){
  2. //Todointroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout
  3. s=jQuery.extend({},jQuery.ajaxSettings,s);
  4. @H_502_51@varid=@H_502_51@newDate().getTime()
  5. @H_502_51@varform=jQuery.createUploadForm(id,s.fileElementId);
增加自己要传递的参数:
[javascript] view plain copy
  1. ajaxFileUpload:@H_502_51@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:@H_502_51@function(id,fileElementId,tag_name,tag_link,tag_sort,tag_status,tag_id)//增加tag_name,tag_id
  2. {
  3. //createform
  4. @H_502_51@varformId='jUploadForm'+id;
  5. @H_502_51@varfileId='jUploadFile'+id;
  6. //--增加以下内容
  7. @H_502_51@vartagNameId='tag_name'+id;
  8. @H_502_51@vartagLinkId='tag_link'+id;
  9. @H_502_51@vartagSortId='tag_sort'+id;
  10. @H_502_51@vartagStatusId='tag_status'+id;
  11. @H_502_51@vartagIdId='tag_id'+id;
  12. //--end
  13. @H_502_51@varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
  14. @H_502_51@varoldElement=$('#'+fileElementId);
  15. @H_502_51@varnewElement=$(oldElement).clone();
  16. //--增加以下内容
  17. @H_502_51@vartagNameElement='<inputtype="text"name="tag_name"value="'+tag_name+'">';
  18. @H_502_51@vartagLinkElement='<inputtype="text"name="tag_link"value="'+tag_link+'">';
  19. @H_502_51@vartagSortElement='<inputtype="text"name="tag_sort"value="'+tag_sort+'">';
  20. @H_502_51@vartagStatusElement='<inputtype="text"name="tag_status"value="'+tag_status+'">';
  21. @H_502_51@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. @H_502_51@returnform;
  39. },
注意注释中的内容为增加了内容。

修改完后，如何使用？

[javascript] view plain copy
  1. $.ajaxFileUpload({
  2. url:web_url,
  3. secureuri:@H_502_51@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:@H_502_51@function(data,status){}
  14. //以下省略

OK，done.


附ajaxfileupload完整版：

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native