AjaxUpLoad.js使用实现文件上传

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了AjaxUpLoad.js使用实现文件上传，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

AjaxUpLoad.js的使用实现无刷新文件上传，如图。

图1 文件上传前

图2 文件上传后

1、创建页面并编写HTML

[html] view plain copy
  1. 上传文档:
  2. <divclass="uploadFile">
  3. <spanid="doc"><inputtype="text"disabled="disabled"/></span>
  4. <inputtype="hidden"id="hidFileName"/>
  5. <inputtype="button"id="btnUploadFile"value="上传"/>
  6. <inputtype="button"id="btnDeleteFile"value="删除"/>
  7. </div>
  9. 上传图片:
  10. <divclass="uploadImg">
  11. <imgid="imgShow"src="/images/nophoto.gif"/>
  12. <inputtype="hidden"id="hidImgName"/>
  13. <inputtype="button"id="btnUploadImg"value="上传"/>
  14. <inputtype="button"id="btnDeleteImg"value="删除"/>
  15. </div>

2、引用AjaxUpload.js文件

[html] view plain copy
  1. <scriptsrc="/js/common/AjaxUpload.js"type="text/javascript"></script>

3、编写JS脚本

[java] view plain copy
@H_708_502@
  1. window.onload=function(){
  2. init();//初始化
  3. }
  5. //初始化
  6. functioninit(){
  7. //初始化文档上传
  8. varbtnFile=document.getElementById("btnUploadFile");
  9. vardoc=document.getElementById("doc");
  10. varhidFileName=document.getElementById("hidFileName");
  11. document.getElementById("btnDeleteFile").onclick=function(){DelFile(doc,hidFileName);};
  12. g_AjxUploadFile(btnFile,doc,hidFileName);
  14. //初始化图片上传
  15. varbtnImg=document.getElementById("btnUploadImg");
  16. varimg=document.getElementById("imgShow");
  17. varhidImgName=document.getElementById("hidImgName");
  18. document.getElementById("btnDeleteImg").onclick=function(){DelImg(img,hidImgName);};
  19. g_AjxUploadImg(btnImg,img,hidImgName);
  20. }
  23. varg_AjxTempDir="/file/temp/";
  24. //文档上传
  25. functiong_AjxUploadFile(btn,hidPut,action){
  26. varbutton=btn,interval;
  27. newAjaxUpload(button,{
  28. action:((action==null||action==undefined)?'/Common/UploadHandler.ashx?fileType=file':action),
  29. data:{},
  30. name:'myfile',
  31. onSubmit:function(file,ext){
  32. if(!(ext&&/^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))){
  33. alert("您上传的文档格式不对，请重新选择！");
  34. returnfalse;
  35. }
  36. },
  37. onComplete:function(file,response){
  38. flagValue=response;
  39. if(flagValue=="1"){
  40. alert("您上传的文档格式不对，请重新选择！");
  41. }
  42. elseif(flagValue=="2"){
  43. alert("您上传的文档大于2M，请重新选择！");
  44. }
  45. elseif(flagValue=="3"){
  46. alert("文档上传失败！");
  47. }
  48. else{
  49. hidPut.value=response;
  50. doc.innerHTML="<ahref='"+g_AjxTempDir+response+"'target='_blank'>"+response+"</a>";
  51. }
  52. }
  53. });
  54. }
  55. //图片上传
  56. functiong_AjxUploadImg(btn,hidPut){
  57. varbutton=btn,{
  58. action:'/Common/UploadHandler.ashx?fileType=img',
  59. data:{},ext){
  60. if(!(ext&&/^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))){
  61. alert("您上传的图片格式不对，请重新选择！");
  62. returnfalse;
  63. }
  64. },response){
  65. flagValue=response;
  66. if(flagValue=="1"){
  67. alert("您上传的图片格式不对，请重新选择！");
  68. }
  69. elseif(flagValue=="2"){
  70. alert("您上传的图片大于200K，请重新选择！");
  71. }
  72. elseif(flagValue=="3"){
  73. alert("图片上传失败！");
  74. }
  75. else{
  76. hidPut.value=response;
  77. img.src=g_AjxTempDir+response;
  78. }
  79. }
  80. });
  81. }
  83. //删除文档
  84. functionDelFile(doc,hidPut){
  85. hidPut.value="";
  86. doc.innerHTML="<inputtype=\"text\"disabled=\"disabled\"/>";
  87. }
  89. //删除图片
  90. functionDelImg(img,hidPut){
  91. hidPut.value="";
  92. img.src="/images/nophoto.gif";
  93. }

4、创建/Common/UploadHandler.ashx处理程序

[csharp] view plain copy
  1. <%@WebHandlerLanguage="C#"Class="UploadHandler"%>
  3. usingSystem;
  4. usingSystem.Web;
  5. usingSystem.Text.RegularExpressions;
  6. usingSystem.IO;
  8. publicclassUploadHandler:IHttpHandler{
  9. privatestring_filedir="";//文件目录
  10. ///<summary>
  11. ///处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)
  12. ///</summary>
  13. ///<paramname="context"></param>
  14. publicvoidProcessRequest(HttpContextcontext){
  15. _filedir=context.Server.MapPath(@"/file/temp/");
  16. try
  17. {
  18. stringresult="3";
  19. stringfileType=context.Request.QueryString["fileType"];//获取上传文件类型
  20. if(fileType=="file")
  21. {
  22. result=UploadFile(context);//文档上传
  23. }
  24. elseif(fileType=="img")
  25. {
  26. result=UploadImg(context);//图片上传
  27. }
  28. context.Response.Write(result);
  29. }
  30. catch
  31. {
  32. context.Response.Write("3");//3文件上传失败
  33. }
  34. }
  36. ///<summary>
  37. ///文档上传
  38. ///</summary>
  39. ///<paramname="context"></param>
  40. ///<returns></returns>
  41. privatestringUploadFile(HttpContextcontext)
  42. {
  43. intcout=context.Request.Files.Count;
  44. if(cout>0)
  45. {
  46. HttpPostedFilehpf=context.Request.Files[0];
  47. if(hpf!=null)
  48. {
  49. stringfileExt=Path.GetExtension(hpf.FileName).ToLower();
  50. //只能上传文件，过滤不可上传的文件类型
  51. stringfileFilt=".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......";
  52. if(fileFilt.IndexOf(fileExt)<=-1)
  53. {
  54. return"1";
  55. }
  57. //判断文件大小
  58. intlength=hpf.ContentLength;
  59. if(length>2097152)
  60. {
  61. return"2";
  62. }
  64. Randomrd=newRandom();
  65. DateTimenowTime=DateTime.Now;
  66. stringnewFileName=nowTime.Year.ToString()+nowTime.Month.ToString()+nowTime.Day.ToString()+nowTime.Hour.ToString()+nowTime.Minute.ToString()+nowTime.Second.ToString()+rd.Next(1000,1000000)+Path.GetExtension(hpf.FileName);
  67. if(!Directory.Exists(_filedir))
  68. {
  69. Directory.CreateDirectory(_filedir);
  70. }
  71. stringfileName=_filedir+newFileName;
  72. hpf.SaveAs(fileName);
  73. returnnewFileName;
  74. }
  76. }
  77. return"3";
  78. }
  80. ///<summary>
  81. ///图片上传
  82. ///</summary>
  83. ///<paramname="context"></param>
  84. ///<returns></returns>
  85. privatestringUploadImg(HttpContextcontext)
  86. {
  87. intcout=context.Request.Files.Count;
  88. if(cout>0)
  89. {
  90. HttpPostedFilehpf=context.Request.Files[0];
  91. if(hpf!=null)
  92. {
  93. stringfileExt=Path.GetExtension(hpf.FileName).ToLower();
  94. //只能上传文件，过滤不可上传的文件类型
  95. stringfileFilt=".gif|.jpg|.PHP|.jsp|.jpeg|.png|......";
  96. if(fileFilt.IndexOf(fileExt)<=-1)
  97. {
  98. return"1";
  99. }
  101. //判断文件大小
  102. intlength=hpf.ContentLength;
  103. if(length>204800)
  104. {
  105. return"2";
  106. }
  108. Randomrd=newRandom();
  109. DateTimenowTime=DateTime.Now;
  110. stringnewFileName=nowTime.Year.ToString()+nowTime.Month.ToString()+nowTime.Day.ToString()+nowTime.Hour.ToString()+nowTime.Minute.ToString()+nowTime.Second.ToString()+rd.Next(1000,1000000)+Path.GetExtension(hpf.FileName);
  111. if(!Directory.Exists(_filedir))
  112. {
  113. Directory.CreateDirectory(_filedir);
  114. }
  115. stringfileName=_filedir+newFileName;
  116. hpf.SaveAs(fileName);
  117. returnnewFileName;
  118. }
  120. }
  121. return"3";
  122. }
  124. #regionIHttpHandler成员
  126. publicboolIsReusable
  127. {
  128. get{thrownewNotImplementedException();}
  129. }
  131. #endregion
  132. }

附件1：页面CSS样式

[css] view plain copy
  1. /*上传文件*/
  2. .uploadFile{margin-bottom:10px;}
  3. /*上传图片*/
  4. .uploadImg{}
  5. .uploadImgimg{width:102px;height:64px;border:1pxsolid#CCCCCC;display:block;}

附件2：AjaxUpload.js文件

[javascript] view plain copy
  1. /**
  2. *AJAXUpload(http://valums.com/ajax-upload/)
  3. *Copyright(c)AndrisValums
  4. *LicensedundertheMITlicense(http://valums.com/mit-license/)
  5. *ThankstoGaryHaran,DavidMark,CoreyBurnsandothersforcontributions
  6. */
  7. (function(){
  8. /*globalwindow*/
  9. /*jslintbrowser:true,devel:true,undef:true,nomen:true,bitwise:true,regexp:true,newcap:true,immed:true*/
  11. /**
  12. *WrapperforFireBug'sconsole.log
  13. */
  15. functionlog(){
  16. if(typeof(console)!='undefined'&&typeof(console.log)=='function'){
  17. Array.prototype.unshift.call(arguments,'[AjaxUpload]');
  18. console.log(Array.prototype.join.call(arguments,''));
  19. }
  20. }
  22. /**
  23. *Attacheseventtoadomelement.
  24. *@param{Element}el
  25. *@paramtypeeventname
  26. *@paramfncallbackThisreferstothepassedelement
  27. */
  29. functionaddEvent(el,type,fn){
  30. if(el.addEventListener){
  31. el.addEventListener(type,fn,false);
  32. }elseif(el.attachEvent){
  33. el.attachEvent('on'+type,function(){
  34. fn.call(el);
  35. });
  36. }else{
  37. thrownewError('notsupportedorDOMnotloaded');
  38. }
  39. }
  41. /**
  42. *Attachesresizeeventtoawindow,limiting
  43. *numberofeventfired.Firesonlywhenencounteres
  44. *delayof100afterseriesofevents.
  45. *
  46. *Somebrowsersfireeventmultipletimeswhenresizing
  47. *http://www.quirksmode.org/dom/events/resize.html
  48. *
  49. *@paramfncallbackThisreferstothepassedelement
  50. */
  52. functionaddResizeEvent(fn){
  53. vartimeout;
  55. addEvent(window,'resize',function(){
  56. if(timeout){
  57. clearTimeout(timeout);
  58. }
  59. timeout=setTimeout(fn,100);
  60. });
  61. }
  63. //Needsmoretesting,willberewritenfornextversion
  64. //getOffsetfunctioncopiedfromjQuerylib(http://jquery.com/)
  65. if(document.documentElement.getBoundingClientRect){
  66. //GetOffsetusinggetBoundingClientRect
  67. //http://ejohn.org/blog/getboundingclientrect-is-awesome/
  68. vargetOffset=function(el){
  69. varBox=el.getBoundingClientRect();
  70. vardoc=el.ownerDocument;
  71. varbody=doc.body;
  72. vardocElem=doc.documentElement;//forie
  73. varclientTop=docElem.clientTop||body.clientTop||0;
  74. varclientLeft=docElem.clientLeft||body.clientLeft||0;
  76. //InInternetExplorer7getBoundingClientRectpropertyistreatedasphysical,
  77. //whileothersarelogical.Makealllogical,likeinIE8.
  78. varzoom=1;
  79. if(body.getBoundingClientRect){
  80. varbound=body.getBoundingClientRect();
  81. zoom=(bound.right-bound.left)/body.clientWidth;
  82. }
  84. if(zoom>1){
  85. clientTop=0;
  86. clientLeft=0;
  87. }
  89. vartop=Box.top/zoom+(window.pageYOffset||docElem&&docElem.scrollTop/zoom||body.scrollTop/zoom)-clientTop,
  90. left=Box.left/zoom+(window.pageXOffset||docElem&&docElem.scrollLeft/zoom||body.scrollLeft/zoom)-clientLeft;
  92. return{
  93. top:top,
  94. left:left
  95. };
  96. };
  97. }else{
  98. //Getoffsetaddingalloffsets
  99. vargetOffset=function(el){
  100. vartop=0,
  101. left=0;
  102. do{
  103. top+=el.offsetTop||0;
  104. left+=el.offsetLeft||0;
  105. el=el.offsetParent;
  106. }while(el);
  108. return{
  109. left:left,
  110. top:top
  111. };
  112. };
  113. }
  115. /**
  116. *Returnsleft,top,rightandbottompropertiesdescribingtheborder-Box,
  117. *inpixels,withthetop-leftrelativetothebody
  118. *@param{Element}el
  119. *@return{Object}Containsleft,right,bottom
  120. */
  122. functiongetBox(el){
  123. varleft,bottom;
  124. varoffset=getOffset(el);
  125. left=offset.left;
  126. top=offset.top;
  128. right=left+el.offsetWidth;
  129. bottom=top+el.offsetHeight;
  131. return{
  132. left:left,
  133. right:right,
  134. top:top,
  135. bottom:bottom
  136. };
  137. }
  139. /**
  140. *Helperthattakesobjectliteral
  141. *andaddallpropertiestoelement.style
  142. *@param{Element}el
  143. *@param{Object}styles
  144. */
  146. functionaddStyles(el,styles){
  147. for(varnameinstyles){
  148. if(styles.hasOwnProperty(name)){
  149. el.style[name]=styles[name];
  150. }
  151. }
  152. }
  154. /**
  155. *Functionplacesanabsolutelypositioned
  156. *elementontopofthespecifiedelement
  157. *copyingpositionanddimentions.
  158. *@param{Element}from
  159. *@param{Element}to
  160. */
  162. functioncopyLayout(from,to){
  163. varBox=getBox(from);
  165. addStyles(to,{
  166. position:'absolute',
  167. left:Box.left+'px',
  168. top:Box.top+'px',
  169. width:from.offsetWidth+'px',
  170. height:from.offsetHeight+'px'
  171. });
  172. }
  174. /**
  175. *Createsandreturnselementfromhtmlchunk
  176. *UsesinnerHTMLtocreateanelement
  177. */
  178. vartoElement=(function(){
  179. vardiv=document.createElement('div');
  180. returnfunction(html){
  181. div.innerHTML=html;
  182. varel=div.firstChild;
  183. returndiv.removeChild(el);
  184. };
  185. })();
  187. /**
  188. *Functiongeneratesuniqueid
  189. *@returnuniqueid
  190. */
  191. vargetUID=(function(){
  192. varid=0;
  193. returnfunction(){
  194. return'ValumsAjaxUpload'+id++;
  195. };
  196. })();
  198. /**
  199. *Getfilenamefrompath
  200. *@param{String}filepathtofile
  201. *@returnfilename
  202. */
  204. functionfileFromPath(file){
  205. returnfile.replace(/.*(\/|\\)/,"");
  206. }
  208. /**
  209. *Getfileextensionlowercase
  210. *@param{String}filename
  211. *@returnfileextenstion
  212. */
  214. functiongetExt(file){
  215. return(-1!==file.indexOf('.'))?file.replace(/.*[.]/,''):'';
  216. }
  218. functionhasClass(el,name){
  219. varre=newRegExp('\\b'+name+'\\b');
  220. returnre.test(el.className);
  221. }
  223. functionaddClass(el,name){
  224. if(!hasClass(el,name)){
  225. el.className+=''+name;
  226. }
  227. }
  229. functionremoveClass(el,name){
  230. varre=newRegExp('\\b'+name+'\\b');
  231. el.className=el.className.replace(re,'');
  232. }
  234. functionremoveNode(el){
  235. el.parentNode.removeChild(el);
  236. }
  238. /**
  239. *Easystylinganduploading
  240. *@constructor
  241. *@parambuttonAnelementyouwantconvertto
  242. *uploadbutton.Testeddimentionsupto500x500px
  243. *@param{Object}optionsSeedefaultsbelow.
  244. */
  245. window.AjaxUpload=function(button,options){
  246. this._settings={
  247. //Locationoftheserver-sideuploadscript
  248. action:'upload.PHP',
  249. //Fileuploadname
  250. name:'userfile',
  251. //Additionaldatatosend
  252. data:{},
  253. //Submitfileassoonasit'sselected
  254. autoSubmit:true,
  255. //Thetypeofdatathatyou'reexpectingbackfromtheserver.
  256. //htmlandxmlaredetectedautomatically.
  257. //Onlyusefulwhenyouareusingjsondataasaresponse.
  258. //Setto"json"inthatcase.
  259. responseType:false,
  260. //Classappliedtobuttonwhenmouseishovered
  261. hoverClass:'hover',
  262. //ClassappliedtobuttonwhenAUisdisabled
  263. disabledClass:'disabled',
  264. //Whenuserselectsafile,usefulwithautoSubmitdisabled
  265. //Youcanreturnfalsetocancelupload
  266. onChange:function(file,extension){},
  267. //Callbacktofirebeforefileisuploaded
  268. //Youcanreturnfalsetocancelupload
  269. onSubmit:function(file,
  270. //Firedwhenfileuploadiscompleted
  271. //WARNING!DONOTUSE"FALSE"STRINGASARESPONSE!
  272. onComplete:function(file,response){}
  273. };
  275. //Mergetheusersoptionswithourdefaults
  276. for(variinoptions){
  277. if(options.hasOwnProperty(i)){
  278. this._settings[i]=options[i];
  279. }
  280. }
  282. //buttonisn'tnecessaryadomelement
  283. if(button.jquery){
  284. //jQueryobjectwaspassed
  285. button=button[0];
  286. }elseif(typeofbutton=="string"){
  287. if(/^#.*/.test(button)){
  288. //IfjQueryuserpasses#elementIddon'tbreakit
  289. button=button.slice(1);
  290. }
  292. button=document.getElementById(button);
  293. }
  295. if(!button||button.nodeType!==1){
  296. thrownewError("Pleasemakesurethatyou'repassingavalidelement");
  297. }
  299. if(button.nodeName.toUpperCase()=='A'){
  300. //disablelink
  301. addEvent(button,'click',function(e){
  302. if(e&&e.preventDefault){
  303. e.preventDefault();
  304. }elseif(window.event){
  305. window.event.returnValue=false;
  306. }
  307. });
  308. }
  310. //DOMelement
  311. this._button=button;
  312. //DOMelement
  313. this._input=null;
  314. //Ifdisabledclickingonbuttonwon'tdoanything
  315. this._disabled=false;
  317. //ifthebuttonwasdisabledbeforerefreshifwillremain
  318. //disabledinFireFox,let'sfixit
  319. this.enable();
  321. this._rerouteClicks();
  322. };
  324. //assigningmethodstoourclass
  325. AjaxUpload.prototype={
  326. setData:function(data){
  327. this._settings.data=data;
  328. },
  329. disable:function(){
  330. addClass(this._button,this._settings.disabledClass);
  331. this._disabled=true;
  333. varnodeName=this._button.nodeName.toUpperCase();
  334. if(nodeName=='INPUT'||nodeName=='BUTTON'){
  335. this._button.setAttribute('disabled','disabled');
  336. }
  338. //hideinput
  339. if(this._input){
  340. //WeusevisibilityinsteadofdisplaytofixproblemwithSafari4
  341. //Theproblemisthatthevalueofinputdoesn'tchangeifit
  342. //hasdisplaynonewhenuserselectsafile
  343. this._input.parentNode.style.visibility='hidden';
  344. }
  345. },
  346. enable:function(){
  347. removeClass(this._button,this._settings.disabledClass);
  348. this._button.removeAttribute('disabled');
  349. this._disabled=false;
  351. },
  352. /**
  353. *Createsinvisiblefileinput
  354. *thatwillhoverabovethebutton
  355. *<div><inputtype='file'/></div>
  356. */
  357. _createInput:function(){
  358. varself=this;
  360. varinput=document.createElement("input");
  361. input.setAttribute('type','file');
  362. input.setAttribute('name',this._settings.name);
  364. addStyles(input,{
  365. 'position':'absolute',
  366. //inOperaonly'browse'button
  367. //isclickableanditislocatedat
  368. //therightsideoftheinput
  369. 'right':0,
  370. 'margin':0,
  371. 'padding':0,
  372. 'fontSize':'480px',
  373. 'cursor':'pointer'
  374. });
  376. vardiv=document.createElement("div");
  377. addStyles(div,{
  378. 'display':'block',
  379. 'position':'absolute',
  380. 'overflow':'hidden',
  381. 'margin':0,
  382. 'opacity':0,
  383. //Makesurebrowsebuttonisintherightside
  384. //inInternetExplorer
  385. 'direction':'ltr',
  386. //MaxzIndexsupportedbyOpera9.0-9.2
  387. 'zIndex':2147483583
  388. });
  390. //Makesurethatelementopacityexists.
  391. //OtherwiseuseIEfilter
  392. if(div.style.opacity!=="0"){
  393. if(typeof(div.filters)=='undefined'){
  394. thrownewError('Opacitynotsupportedbythebrowser');
  395. }
  396. div.style.filter="alpha(opacity=0)";
  397. }
  399. addEvent(input,'change',function(){
  401. if(!input||input.value===''){
  402. return;
  403. }
  405. //Getfilenamefrominput,required
  406. //assomebrowsershavepathinsteadofit
  407. varfile=fileFromPath(input.value);
  409. if(false===self._settings.onChange.call(self,file,getExt(file))){
  410. self._clearInput();
  411. return;
  412. }
  414. //Submitformwhenvalueischanged
  415. if(self._settings.autoSubmit){
  416. self.submit();
  417. }
  418. });
  420. addEvent(input,'mouSEOver',function(){
  421. addClass(self._button,self._settings.hoverClass);
  422. });
  424. addEvent(input,'mouSEOut',function(){
  425. removeClass(self._button,self._settings.hoverClass);
  427. //WeusevisibilityinsteadofdisplaytofixproblemwithSafari4
  428. //Theproblemisthatthevalueofinputdoesn'tchangeifit
  429. //hasdisplaynonewhenuserselectsafile
  430. input.parentNode.style.visibility='hidden';
  432. });
  434. div.appendChild(input);
  435. document.body.appendChild(div);
  437. this._input=input;
  438. },
  439. _clearInput:function(){
  440. if(!this._input){
  441. return;
  442. }
  444. //this._input.value='';Doesn'tworkinIE6
  445. removeNode(this._input.parentNode);
  446. this._input=null;
  447. this._createInput();
  449. removeClass(this._button,this._settings.hoverClass);
  450. },
  451. /**
  452. *Functionmakessurethatwhenuserclicksuploadbutton,
  453. *thethis._inputisclickedinstead
  454. */
  455. _rerouteClicks:function(){
  456. varself=this;
  458. //IEwilllaterdisplay'accessdenied'error
  459. //ifyouuseusingself._input.click()
  460. //otherbrowsersjustignoreclick()
  462. addEvent(self._button,function(){
  463. if(self._disabled){
  464. return;
  465. }
  467. if(!self._input){
  468. self._createInput();
  469. }
  471. vardiv=self._input.parentNode;
  472. copyLayout(self._button,div);
  473. div.style.visibility='visible';
  475. });
  478. //commentedbecausewenowhideinputonmouseleave
  479. /**
  480. *Whenthewindowisresizedtheelements
  481. *canbemisalignedifbuttonpositiondepends
  482. *onwindowsize
  483. */
  484. //addResizeEvent(function(){
  485. //if(self._input){
  486. //copyLayout(self._button,self._input.parentNode);
  487. //}
  488. //});
  490. },
  491. /**
  492. *Createsiframewithuniquename
  493. *@return{Element}iframe
  494. */
  495. _createIframe:function(){
  496. //Wecan'tusegetTime,becauseitsometimesreturn
  497. //samevalueinsafari:(
  498. varid=getUID();
  500. //Wecan'tusefollowingcodeasthenameattribute
  501. //won'tbeproperlyregisteredinIE6,andnewwindow
  502. //onformsubmitwillopen
  503. //variframe=document.createElement('iframe');
  504. //iframe.setAttribute('name',id);
  506. variframe=toElement('<iframesrc="javascript:false;"name="'+id+'"/>');
  507. //src="javascript:false;wasadded
  508. //becauseitpossiblyremovesie6prompt
  509. //"Thispagecontainsbothsecureandnonsecureitems"
  510. //Anyway,itdoesn'tdoanyharm.
  511. iframe.setAttribute('id',id);
  513. iframe.style.display='none';
  514. document.body.appendChild(iframe);
  516. returniframe;
  517. },
  518. /**
  519. *Createsform,thatwillbesubmittedtoiframe
  520. *@param{Element}iframeWheretosubmit
  521. *@return{Element}form
  522. */
  523. _createForm:function(iframe){
  524. varsettings=this._settings;
  526. //Wecan'tusethefollowingcodeinIE6
  527. //varform=document.createElement('form');
  528. //form.setAttribute('method','post');
  529. //form.setAttribute('enctype','multipart/form-data');
  530. //Becauseinthiscasefilewon'tbeattachedtorequest
  531. varform=toElement('<formmethod="post"enctype="multipart/form-data"></form>');
  533. form.setAttribute('action',settings.action);
  534. form.setAttribute('target',iframe.name);
  535. form.style.display='none';
  536. document.body.appendChild(form);
  538. //Createhiddeninputelementforeachdatakey
  539. for(varpropinsettings.data){
  540. if(settings.data.hasOwnProperty(prop)){
  541. varel=document.createElement("input");
  542. el.setAttribute('type','hidden');
  543. el.setAttribute('name',prop);
  544. el.setAttribute('value',settings.data[prop]);
  545. form.appendChild(el);
  546. }
  547. }
  548. returnform;
  549. },
  550. /**
  551. *GetsresponsefromiframeandfiresonCompleteeventwhenready
  552. *@paramiframe
  553. *@paramfileFilenametouseinonCompletecallback
  554. */
  555. _getResponse:function(iframe,file){
  556. //gettingresponse
  557. vartoDeleteFlag=false,
  558. self=this,
  559. settings=this._settings;
  561. addEvent(iframe,'load',function(){
  563. if(//ForSafari
  564. iframe.src=="javascript:'%3Chtml%3E%3C/html%3E';"||
  565. //ForFF,IE
  566. iframe.src=="javascript:'<html></html>';"){
  567. //Firsttimearound,donotdelete.
  568. //Wereloadtoblankpage,sothatreloadingmainpage
  569. //doesnotre-submitthepost.
  571. if(toDeleteFlag){
  572. //FixbusystateinFF3
  573. setTimeout(function(){
  574. removeNode(iframe);
  575. },
  576. 0);
  577. }
  579. return;
  580. }
  582. vardoc=iframe.contentDocument?iframe.contentDocument:window.frames[iframe.id].document;
  584. //fixingOpera9.26,10.00
  585. if(doc.readyState&&doc.readyState!='complete'){
  586. //Operafiresloadeventmultipletimes
  587. //EvenwhentheDOMisnotreadyyet
  588. //thisfixshouldnotaffectotherbrowsers
  589. return;
  590. }
  592. //fixingOpera9.64
  593. if(doc.body&&doc.body.innerHTML=="false"){
  594. //InOpera9.64eventwasfiredsecondtime
  595. //whenbody.innerHTMLchangedfromfalse
  596. //toserverresponseapprox.after1sec
  597. return;
  598. }
  600. varresponse;
  602. if(doc.XMLDocument){
  603. //responseisaxmldocumentInternetExplorerproperty
  604. response=doc.XMLDocument;
  605. }elseif(doc.body){
  606. //responseishtmldocumentorplaintext
  607. response=doc.body.innerHTML;
  609. if(settings.responseType&&settings.responseType.toLowerCase()=='json'){
  610. //Ifthedocumentwassentas'application/javascript'or
  611. //'text/javascript',thenthebrowserwrapsthetextina<pre>
  612. //tagandperformshtmlencodingonthecontents.Inthiscase,
  613. //weneedtopulltheoriginaltextcontentfromthetextnode's
  614. //nodeValuepropertytoretrievetheunmangledcontent.
  615. //NotethatIE6onlyunderstandstext/html
  616. if(doc.body.firstChild&&doc.body.firstChild.nodeName.toUpperCase()=='PRE'){
  617. response=doc.body.firstChild.firstChild.nodeValue;
  618. }
  620. if(response){
  621. response=eval("("+response+")");
  622. }else{
  623. response={};
  624. }
  625. }
  626. }else{
  627. //responseisaxmldocument
  628. response=doc;
  629. }
  631. settings.onComplete.call(self,response);
  633. //Reloadblankpage,sothatreloadingmainpage
  634. //doesnotre-submitthepost.Also,rememberto
  635. //deletetheframe
  636. toDeleteFlag=true;
  638. //FixIEmixedcontentissue
  639. iframe.src="javascript:'<html></html>';";
  640. });
  641. },
  642. /**
  643. *Uploadfilecontainedinthis._input
  644. */
  645. submit:function(){
  646. varself=this,
  647. settings=this._settings;
  649. if(!this._input||this._input.value===''){
  650. return;
  651. }
  653. varfile=fileFromPath(this._input.value);
  655. //userreturnedfalsetocancelupload
  656. if(false===settings.onSubmit.call(this,getExt(file))){
  657. this._clearInput();
  658. return;
  659. }
  661. //sendingrequest
  662. variframe=this._createIframe();
  663. varform=this._createForm(iframe);
  665. //assumingfollowingstructure
  666. //div->inputtype='file'
  667. removeNode(this._input.parentNode);
  668. removeClass(self._button,self._settings.hoverClass);
  670. form.appendChild(this._input);
  672. form.submit();
  674. //requestset,cleanup
  675. removeNode(form);
  676. form=null;
  677. removeNode(this._input);
  678. this._input=null;
  680. //GetresponsefromiframeandfireonCompleteeventwhenready
  681. this._getResponse(iframe,file);
  683. //getreadyfornextrequest
  684. this._createInput();
  685. }
  686. };
  687. })();
原文链接：https://www.f2er.com/ajax/162685.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作