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

AjaxUpLoad.js使用实现文件上传

分类：Ajax作者：编程之家

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="删除"div
  7. 上传图片:
  8. divclass="uploadImg"imgid="imgShow"src="/images/nophoto.gif"inputtype="hidden"id="hidImgName"inputtype="button"id="btnUploadImg"value="上传"inputtype="button"id="btnDeleteImg"value="删除">
2、引用AjaxUpload.js文件
copy
    scriptsrc="/js/common/AjaxUpload.js"type="text/javascript"script3、编写JS脚本
    [java] copy
    window.onload=function(){
  1. init();//初始化
  2. }
  3. //初始化
  4. functioninit(){
  5. //初始化文档上传
  6. varbtnFile=document.getElementById("btnUploadFile");
  7. vardoc=document.getElementById("doc");
  8. varhidFileName=document.getElementById("hidFileName");
  9. document.getElementById("btnDeleteFile").onclick=function(){DelFile(doc,hidFileName);};
  10. g_AjxUploadFile(btnFile,doc,hidFileName);
  12. //初始化图片上传
  13. varbtnImg=document.getElementById("btnUploadImg");
  14. varimg=document.getElementById("imgShow");
  15. varhidImgName=document.getElementById("hidImgName");
  16. document.getElementById("btnDeleteImg").onclick=function(){DelImg(img,hidImgName);};
  17. g_AjxUploadImg(btnImg,img,hidImgName);
  18. }
  19. varg_AjxTempDir="/file/temp/";
  20. //文档上传
  21. functiong_AjxUploadFile(btn,hidPut,action){
  22. varbutton=btn,interval;
  23. newAjaxUpload(button,{
  24. action:((action==null||action==undefined)?'/Common/UploadHandler.ashx?fileType=file':action),
  25. data:{},
  26. name:'myfile',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> onSubmit:function(file,ext){
  27. if(!(ext&&/^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))){
  28. alert("您上传的文档格式不对，请重新选择！");
  29. returnfalse;
  30. },
  31. onComplete:function(file,response){
  32. flagValue=response;
  33. if(flagValue=="1"){
  34. alert("您上传的文档格式不对，请重新选择！");
  35. elseif(flagValue=="2"){
  36. alert("您上传的文档大于2M，请重新选择！");
  37. if(flagValue=="3"){
  38. alert("文档上传失败！");
  39. else{
  40. hidPut.value=response;
  41. doc.innerHTML="<ahref='"+g_AjxTempDir+response+"'target='_blank'>"+response+"</a>";
  42. });
  43. //图片上传
  44. functiong_AjxUploadImg(btn,hidPut){
  45. varbutton=btn,interval;
  46. action:'/Common/UploadHandler.ashx?fileType=img',
  47. data:{},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> name:'myfile',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> onSubmit:function(file,ext){
  48. if(!(ext&&/^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))){
  49. alert("您上传的图片格式不对，请重新选择！");
  50. false;
  51. },248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> onComplete:function(file,response){
  52. flagValue=response;
  53. if(flagValue=="1"){
  54. alert("您上传的图片格式不对，请重新选择！");
  55. if(flagValue=="2"){
  56. alert("您上传的图片大于200K，请重新选择！");
  57. if(flagValue=="3"){
  58. alert("图片上传失败！");
  59. else{
  60. hidPut.value=response;
  61. img.src=g_AjxTempDir+response;
  62. });
  63. //删除文档
  64. functionDelFile(doc,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> hidPut.value="";
  65. doc.innerHTML="<inputtype=\"text\"disabled=\"disabled\"/>";
  66. //删除图片
  67. functionDelImg(img,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> img.src="/images/nophoto.gif";
  68. }

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

[csharp] copy
    <%@WebHandlerLanguage="C#"Class="UploadHandler"%>
  1. usingSystem;
  2. usingSystem.Web;
  3. usingSystem.Text.RegularExpressions;
  4. usingSystem.IO;
  5. publicclassUploadHandler:IHttpHandler{
  6. privatestring_filedir="";//文件目录
  7. ///<summary>
  8. ///处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)
  9. ///</summary>
  10. ///<paramname="context"></param>
  11. voidProcessRequest(HttpContextcontext){
  12. _filedir=context.Server.MapPath(@"/file/temp/");
  13. try
  14. {
  15. stringresult="3";
  16. stringfileType=context.Request.QueryString["fileType"];//获取上传文件类型
  17. if(fileType=="file")
  18. result=UploadFile(context);if(fileType=="img")
  19. result=UploadImg(context);//图片上传
  20. context.Response.Write(result);
  21. catch
  22. context.Response.Write("3");//3文件上传失败
  23. ///文档上传
  24. ///<returns></returns>
  25. stringUploadFile(HttpContextcontext)
  26. {
  27. intcout=context.Request.Files.Count;
  28. if(cout>0)
  29. HttpPostedFilehpf=context.Request.Files[0];
  30. if(hpf!=null)
  31. stringfileExt=Path.GetExtension(hpf.FileName).ToLower();
  32. //只能上传文件，过滤不可上传的文件类型
  33. stringfileFilt=".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......";
  34. if(fileFilt.IndexOf(fileExt)<=-1)
  35. return"1";
  36. //判断文件大小
  37. intlength=hpf.ContentLength;
  38. if(length>2097152)
  39. return"2";
  40. Randomrd=newRandom();
  41. DateTimeNowTime=DateTime.Now;
  42. 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);
  43. if(!Directory.Exists(_filedir))
  44. Directory.CreateDirectory(_filedir);
  45. stringfileName=_filedir+newFileName;
  46. hpf.SaveAs(fileName);
  47. returnnewFileName;
  48. return"3";
  49. ///图片上传
  50. stringUploadImg(HttpContextcontext)
  51. stringfileFilt=".gif|.jpg|.PHP|.jsp|.jpeg|.png|......";
  52. if(length>204800)
  54. #regionIHttpHandler成员
  55. boolIsReusable
  56. get{thrownewNotImplementedException();}
  58. #endregion
  59. }
附件1：页面CSS样式
[css] copy
    /*上传文件*/
  1. .uploadFile{margin-bottom:10px;}
  2. /*上传图片*/
  3. .uploadImg{}
  4. .uploadImgimg{width:102px;height:64px;border:1pxsolid#CCCCCC;display:block;}
附件2：AjaxUpload.js文件
[javascript] copy
    /**
  1. *AJAXUpload(http://valums.com/ajax-upload/)
  2. *copyright(c)AndrisValums
  3. *LicensedundertheMITlicense(http://valums.com/mit-license/)
  4. *ThankstoGaryHaran,DavidMark,CoreyBurnsandothersforcontributions
  5. */
  6. (function(){
  7. /*globalwindow*/
  8. /*jslintbrowser:true,devel:true,undef:true,nomen:true,bitwise:true,regexp:true,newcap:true,immed:true*/
  9. *WrapperforFireBug'sconsole.log
  10. */
  11. functionlog(){
  12. if(typeof(console)!='undefined'&&typeof(console.log)=='function'){
  13. Array.prototype.unshift.call(arguments,'[AjaxUpload]');
  14. console.log(Array.prototype.join.call(arguments,''));
  15. /**
  16. *Attacheseventtoadomelement.
  17. *@param{Element}el
  18. *@paramtypeeventname
  19. *@paramfncallbackThisreferstothepassedelement
  20. functionaddEvent(el,type,fn){
  21. if(el.addEventListener){
  22. el.addEventListener(type,fn,false);
  23. }if(el.attachEvent){
  24. el.attachEvent('on'+type, fn.call(el);
  25. newError('notsupportedorDOMnotloaded');
  26. *Attachesresizeeventtoawindow,limiting
  27. *numberofeventfired.Firesonlywhenencounteres
  28. *delayof100afterseriesofevents.
  29. *
  30. *Somebrowsersfireeventmultipletimeswhenresizing
  31. *http://www.quirksmode.org/dom/events/resize.html
  32. *
  33. *@paramfncallbackThisreferstothepassedelement
  34. functionaddResizeEvent(fn){
  35. vartimeout;
  36. addEvent(window,'resize',153); background-color:inherit; font-weight:bold">if(timeout){
  37. clearTimeout(timeout);
  38. timeout=setTimeout(fn,100);
  39. //Needsmoretesting,willberewritenfornextversion
  40. //getoffsetfunctioncopiedfromjQuerylib(http://jquery.com/)
  41. if(document.documentElement.getBoundingClientRect){
  42. //GetoffsetusinggetBoundingClientRect
  43. //http://ejohn.org/blog/getboundingclientrect-is-awesome/
  44. vargetoffset=function(el){
  45. varBox=el.getBoundingClientRect();
  46. vardoc=el.ownerDocument;
  47. varbody=doc.body;
  48. vardocElem=doc.documentElement;//forie
  49. varclientTop=docElem.clientTop||body.clientTop||0;
  50. varclientLeft=docElem.clientLeft||body.clientLeft||0;
  51. //InInternetExplorer7getBoundingClientRectpropertyistreatedasphysical,
  52. //whileothersarelogical.Makealllogical,likeinIE8.
  53. varzoom=1;
  54. if(body.getBoundingClientRect){
  55. varbound=body.getBoundingClientRect();
  56. zoom=(bound.right-bound.left)/body.clientWidth;
  57. if(zoom>1){
  58. clientTop=0;
  59. clientLeft=0;
  60. vartop=Box.top/zoom+(window.pageYOffset||docElem&&docElem.scrollTop/zoom||body.scrollTop/zoom)-clientTop,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> left=Box.left/zoom+(window.pageXOffset||docElem&&docElem.scrollLeft/zoom||body.scrollLeft/zoom)-clientLeft;
  61. return{
  62. top:top,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> left:left
  63. };
  64. };
  65. }//Getoffsetaddingalloffsets
  66. function(el){
  67. vartop=0,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> left=0;
  68. do{
  69. top+=el.offsetTop||0;
  70. left+=el.offsetLeft||0;
  71. el=el.offsetParent;
  72. while(el);
  73. left:left,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> top:top
  74. *Returnsleft,top,rightandbottompropertiesdescribingtheborder-Box,0); background-color:inherit">*inpixels,withthetop-leftrelativetothebody
  75. *@return{Object}Containsleft,right,bottom
  76. functiongetBox(el){
  77. varleft,bottom;
  78. varoffset=getoffset(el);
  79. left=offset.left;
  80. top=offset.top;
  81. right=left+el.offsetWidth;
  82. bottom=top+el.offsetHeight;
  83. return{
  84. left:left,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> right:right,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> top:top,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> bottom:bottom
  85. *Helperthattakesobjectliteral
  86. *andaddallpropertiestoElement.style
  87. *@param{Object}styles
  88. functionaddStyles(el,styles){
  89. for(varnameinstyles){
  90. if(styles.hasOwnProperty(name)){
  91. el.style[name]=styles[name];
  92. *Functionplacesanabsolutelypositioned
  93. *elementontopofthespecifiedelement
  94. *copyingpositionanddimentions.
  95. *@param{Element}from
  96. *@param{Element}to
  97. functioncopyLayout(from,to){
  98. varBox=getBox(from);
  99. addStyles(to,{
  100. position:'absolute',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> left:Box.left+'px',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> top:Box.top+'px',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> width:from.offsetWidth+'px',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> height:from.offsetHeight+'px'
  101. *Createsandreturnselementfromhtmlchunk
  102. *UsesinnerHTMLtocreateanelement
  103. vartoElement=(function(){
  104. vardiv=document.createElement('div');
  105. function(html){
  106. div.innerHTML=html;
  107. varel=div.firstChild;
  108. returndiv.removeChild(el);
  109. })();
  110. *Functiongeneratesuniqueid
  111. *@returnuniqueid
  112. vargetUID=(varid=0;
  113. return'ValumsAjaxUpload'+id++;
  114. })();
  115. *Getfilenamefrompath
  116. *@param{String}filepathtofile
  117. *@returnfilename
  118. functionfileFromPath(file){
  119. returnfile.replace(/.*(\/|\\)/,"");
  120. *Getfileextensionlowercase
  121. *@param{String}filename
  122. *@returnfileextenstion
  123. functiongetExt(file){
  124. return(-1!==file.indexOf('.'))?file.replace(/.*[.]/,''):'';
  125. functionhasClass(el,name){
  126. varre=newRegExp('\\b'+name+'\\b');
  127. returnre.test(el.className);
  128. functionaddClass(el,name){
  129. if(!hasClass(el,name)){
  130. el.className+=''+name;
  131. functionremoveClass(el,153); background-color:inherit; font-weight:bold">newRegExp('\\b'+name+'\\b');
  132. el.className=el.className.replace(re,'');
  133. functionremoveNode(el){
  134. el.parentNode.removeChild(el);
  135. *Easystylinganduploading
  136. *@constructor
  137. *@parambuttonAnelementyouwantconvertto
  138. *uploadbutton.Testeddimentionsupto500x500px
  139. *@param{Object}optionsSeedefaultsbelow.
  140. window.AjaxUpload=function(button,options){
  141. this._settings={
  142. //Locationoftheserver-sideuploadscript
  143. action:'upload.PHP',0); background-color:inherit">//Fileuploadname
  144. name:'userfile',0); background-color:inherit">//Additionaldatatosend
  145. //Submitfileassoonasit'sselected
  146. autoSubmit:true,0); background-color:inherit">//Thetypeofdatathatyou'reexpectingbackfromtheserver.
  147. //htmlandxmlaredetectedautomatically.
  148. //Onlyusefulwhenyouareusingjsondataasaresponse.
  149. //Setto"json"inthatcase.
  150. responseType:false,0); background-color:inherit">//Classappliedtobuttonwhenmouseishovered
  151. hoverClass:'hover',0); background-color:inherit">//ClassappliedtobuttonwhenAUisdisabled
  152. disabledClass:'disabled',0); background-color:inherit">//Whenuserselectsafile,usefulwithautoSubmitdisabled
  153. //Youcanreturnfalsetocancelupload
  154. onChange:function(file,extension){},0); background-color:inherit">//Callbacktofirebeforefileisuploaded
  155. //Youcanreturnfalsetocancelupload
  156. onSubmit://Firedwhenfileuploadiscompleted
  157. //WARNING!DONOTUSE"FALSE"STRINGASARESPONSE!
  158. onComplete://Mergetheusersoptionswithourdefaults
  159. variinoptions){
  160. if(options.hasOwnProperty(i)){
  161. this._settings[i]=options[i];
  162. //buttonisn'tnecessaryadomelement
  163. if(button.jquery){
  164. //jQueryobjectwaspassed
  165. button=button[0];
  166. typeofbutton=="string"){
  167. if(/^#.*/.test(button)){
  168. //IfjQueryuserpasses#elementIddon'tbreakit
  169. button=button.slice(1);
  170. button=document.getElementById(button);
  171. if(!button||button.nodeType!==1){
  172. newError("Pleasemakesurethatyou'repassingavalidelement");
  173. if(button.nodeName.toupperCase()=='A'){
  174. //disablelink
  175. addEvent(button,'click',153); background-color:inherit; font-weight:bold">function(e){
  176. if(e&&e.preventDefault){
  177. e.preventDefault();
  178. if(window.event){
  179. window.event.returnValue=//DOMelement
  180. this._button=button;
  181. this._input=null;
  182. //Ifdisabledclickingonbuttonwon'tdoanything
  183. this._disabled=//ifthebuttonwasdisabledbeforerefreshifwillremain
  184. //disabledinFireFox,let'sfixit
  185. this.enable();
  186. this._rerouteClicks();
  187. //assigningmethodstoourclass
  188. AjaxUpload.prototype={
  189. setData:function(data){
  190. this._settings.data=data;
  191. disable: addClass(this._button,153); background-color:inherit; font-weight:bold">this._settings.disabledClass);
  192. true;
  193. varnodeName=this._button.nodeName.toupperCase();
  194. if(nodeName=='INPUT'||nodeName=='BUTTON'){
  195. this._button.setAttribute('disabled','disabled');
  196. //hideinput
  197. this._input){
  198. //WeusevisibilityinsteadofdisplaytofixproblemwithSafari4
  199. //Theproblemisthatthevalueofinputdoesn'tchangeifit
  200. //hasdisplaynonewhenuserselectsafile
  201. this._input.parentNode.style.visibility='hidden';
  202. enable: removeClass(this._settings.disabledClass);
  203. this._button.removeAttribute('disabled');
  204. *Createsinvisiblefileinput
  205. *thatwillhoverabovethebutton
  206. *<div><inputtype='file'/></div>
  207. _createInput:varself=this;
  208. varinput=document.createElement("input");
  209. input.setAttribute('type','file');
  210. input.setAttribute('name',153); background-color:inherit; font-weight:bold">this._settings.name);
  211. addStyles(input,{
  212. 'position':'absolute',0); background-color:inherit">//inoperaonly'browse'button
  213. //isclickableanditislocatedat
  214. //therightsideoftheinput
  215. 'right':0,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'margin':0,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'padding':0,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'fontSize':'480px',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'cursor':'pointer'
  216. vardiv=document.createElement("div");
  217. addStyles(div,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'display':'block',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'overflow':'hidden',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'margin':0,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'padding':0,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> 'opacity':0,0); background-color:inherit">//Makesurebrowsebuttonisintherightside
  218. //inInternetExplorer
  219. 'direction':'ltr',0); background-color:inherit">//MaxzIndexsupportedbyOpera9.0-9.2
  220. 'zIndex':2147483583
  221. //Makesurethatelementopacityexists.
  222. //OtherwiseuseIEfilter
  223. if(div.style.opacity!=="0"){
  224. typeof(div.filters)=='undefined'){
  225. newError('Opacitynotsupportedbythebrowser');
  226. div.style.filter="alpha(opacity=0)";
  227. addEvent(input,'change',153); background-color:inherit; font-weight:bold">if(!input||input.value===''){
  228. return;
  229. //Getfilenamefrominput,required
  230. //assomebrowsershavepathinsteadofit
  231. varfile=fileFromPath(input.value);
  232. false===self._settings.onChange.call(self,file,getExt(file))){
  233. self._clearinput();
  234. return;
  235. //Submitformwhenvalueischanged
  236. if(self._settings.autoSubmit){
  237. self.submit();
  238. addEvent(input,'mouSEOver',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> addClass(self._button,self._settings.hoverClass);
  239. 'mouSEOut',248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> removeClass(self._button,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> input.parentNode.style.visibility='hidden';
  240. div.appendChild(input);
  241. document.body.appendChild(div);
  242. this._input=input;
  243. _clearInput:if(!//this._input.value='';Doesn'tworkinIE6
  244. removeNode(this._input.parentNode);
  245. this._createinput();
  246. removeClass(this._settings.hoverClass);
  247. *Functionmakessurethatwhenuserclicksuploadbutton,0); background-color:inherit">*thethis._inputisclickedinstead
  248. _rerouteClicks:this;
  249. //IEwilllaterdisplay'accessdenied'error
  250. //ifyouuseusingself._input.click()
  251. //otherbrowsersjustignoreclick()
  252. addEvent(self._button,153); background-color:inherit; font-weight:bold">if(self._disabled){
  253. if(!self._input){
  254. self._createinput();
  255. vardiv=self._input.parentNode;
  256. copyLayout(self._button,div);
  257. div.style.visibility='visible';
  258. //commentedbecauseweNowhideinputonmouseleave
  259. *Whenthewindowisresizedtheelements
  260. *canbemisalignedifbuttonpositiondepends
  261. *onwindowsize
  262. //addResizeEvent(function(){
  263. //if(self._input){
  264. //copyLayout(self._button,self._input.parentNode);
  265. //}
  266. //});
  267. *Createsiframewithuniquename
  268. *@return{Element}iframe
  269. _createIframe://Wecan'tusegetTime,becauseitsometimesreturn
  270. //samevalueinsafari:(
  271. varid=getUID();
  272. //Wecan'tusefollowingcodeasthenameattribute
  273. //won'tbeproperlyregisteredinIE6,andnewwindow
  274. //onformsubmitwillopen
  275. //variframe=document.createElement('iframe');
  276. //iframe.setAttribute('name',id);
  277. variframe=toElement('<iframesrc="javascript:false;"name="'+id+'"/>');
  278. //src="javascript:false;wasadded
  279. //becauseitpossiblyremovesie6prompt
  280. //"Thispagecontainsbothsecureandnonsecureitems"
  281. //Anyway,itdoesn'tdoanyharm.
  282. iframe.setAttribute('id',id);
  283. iframe.style.display='none';
  284. document.body.appendChild(iframe);
  285. returniframe;
  286. *Createsform,thatwillbesubmittedtoiframe
  287. *@param{Element}iframeWheretosubmit
  288. *@return{Element}form
  289. _createForm:function(iframe){
  290. varsettings=this._settings;
  291. //Wecan'tusethefollowingcodeinIE6
  292. //varform=document.createElement('form');
  293. //form.setAttribute('method','post');
  294. //form.setAttribute('enctype','multipart/form-data');
  295. //Becauseinthiscasefilewon'tbeattachedtorequest
  296. varform=toElement('<formmethod="post"enctype="multipart/form-data"></form>');
  297. form.setAttribute('action',settings.action);
  298. form.setAttribute('target',iframe.name);
  299. form.style.display='none';
  300. document.body.appendChild(form);
  301. //Createhiddeninputelementforeachdatakey
  302. varpropinsettings.data){
  303. if(settings.data.hasOwnProperty(prop)){
  304. varel=document.createElement("input");
  305. el.setAttribute('type','hidden');
  306. el.setAttribute('name',prop);
  307. el.setAttribute('value',settings.data[prop]);
  308. form.appendChild(el);
  309. returnform;
  310. *GetsresponsefromiframeandfiresonCompleteeventwhenready
  311. *@paramiframe
  312. *@paramfileFilenametouseinonCompletecallback
  313. _getResponse:function(iframe,file){
  314. //gettingresponse
  315. vartoDeleteFlag= self=this,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> settings=this._settings;
  316. addEvent(iframe,'load',153); background-color:inherit; font-weight:bold">if(//ForSafari
  317. iframe.src=="javascript:'%3Chtml%3E%3C/html%3E';"||
  318. //ForFF,IE
  319. iframe.src=="javascript:'<html></html>';"){
  320. //Firsttimearound,donotdelete.
  321. //Wereloadtoblankpage,sothatreloadingmainpage
  322. //doesnotre-submitthepost.
  323. if(toDeleteFlag){
  324. //FixbusystateinFF3
  325. setTimeout( removeNode(iframe);
  326. 0);
  327. vardoc=iframe.contentDocument?iframe.contentDocument:window.frames[iframe.id].document;
  328. //fixingOpera9.26,10.00
  329. if(doc.readyState&&doc.readyState!='complete'){
  330. //Operafiresloadeventmultipletimes
  331. //EvenwhentheDOMisnotreadyyet
  332. //thisfixshouldnotaffectotherbrowsers
  333. //fixingOpera9.64
  334. if(doc.body&&doc.body.innerHTML=="false"){
  335. //Inopera9.64eventwasfiredsecondtime
  336. //whenbody.innerHTMLchangedfromfalse
  337. //toserverresponseapprox.after1sec
  338. varresponse;
  339. if(doc.XMLDocument){
  340. //responseisaxmldocumentInternetExplorerproperty
  341. response=doc.XMLDocument;
  342. if(doc.body){
  343. //responseishtmldocumentorplaintext
  344. response=doc.body.innerHTML;
  345. if(settings.responseType&&settings.responseType.toLowerCase()=='json'){
  346. //Ifthedocumentwassentas'application/javascript'or
  347. //'text/javascript',thenthebrowserwrapsthetextina<pre>
  348. //tagandperformshtmlencodingonthecontents.Inthiscase,
  349. //weneedtopulltheoriginaltextcontentfromthetextnode's
  350. //nodeValuepropertytoretrievetheunmangledcontent.
  351. //NotethatIE6onlyunderstandstext/html
  352. if(doc.body.firstChild&&doc.body.firstChild.nodeName.toupperCase()=='PRE'){
  353. response=doc.body.firstChild.firstChild.nodeValue;
  354. if(response){
  355. response=eval("("+response+")");
  356. response={};
  357. //responseisaxmldocument
  358. response=doc;
  359. settings.onComplete.call(self,response);
  360. //Reloadblankpage,sothatreloadingmainpage
  361. //doesnotre-submitthepost.Also,rememberto
  362. //deletetheframe
  363. toDeleteFlag=//FixIEmixedcontentissue
  364. iframe.src="javascript:'<html></html>';";
  365. *Uploadfilecontainedinthis._input
  366. submit:this._input||this._input.value===''){
  367. varfile=fileFromPath(this._input.value);
  368. //userreturnedfalsetocancelupload
  369. false===settings.onSubmit.call(this._clearinput();
  370. //sendingrequest
  371. variframe=this._createIframe();
  372. varform=this._createForm(iframe);
  373. //assumingfollowingstructure
  374. //div->inputtype='file'
  375. removeClass(self._button,self._settings.hoverClass);
  376. form.appendChild(this._input);
  377. form.submit();
  378. //requestset,cleanup
  379. removeNode(form);
  380. form=this._input);
  381. //GetresponsefromiframeandfireonCompleteeventwhenready
  382. this._getResponse(iframe,file);
  383. //getreadyfornextrequest
  384. this._createinput();
  385. })();

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [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