需要引用 的js
jQuery.extend({ createUploadIframe:function(id,uri) { //createframe varframeId='jUploadFrame'+id; variframeHtml='<iframeid="'+frameId+'"name="'+frameId+'"style="position:absolute;top:-9999px;left:-9999px"'; if(window.ActiveXObject) { if(typeofuri=='boolean'){ iframeHtml+='src="'+'javascript:false'+'"'; } elseif(typeofuri=='string'){ iframeHtml+='src="'+uri+'"'; } } iframeHtml+='/>'; jQuery(iframeHtml).appendTo(document.body); returnjQuery('#'+frameId).get(0); },createUploadForm:function(id,fileElementId,data) { //createform varformId='jUploadForm'+id; varfileId='jUploadFile'+id; varform=jQuery('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>'); if(data) { for(variindata) { jQuery('<inputtype="hidden"name="'+i+'"value="'+data[i]+'"/>').appendTo(form); } } varoldElement=jQuery('#'+fileElementId); varnewElement=jQuery(oldElement).clone(); jQuery(oldElement).attr('id',fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //setattributes jQuery(form).css('position','absolute'); jQuery(form).css('top','-1200px'); jQuery(form).css('left','-1200px'); jQuery(form).appendTo('body'); returnform; },ajaxFileUpload:function(s){ //TODOintroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout s=jQuery.extend({},jQuery.ajaxSettings,s); varid=newDate().getTime() varform=jQuery.createUploadForm(id,s.fileElementId,(typeof(s.data)=='undefined'?false:s.data)); vario=jQuery.createUploadIframe(id,s.secureuri); varframeId='jUploadFrame'+id; varformId='jUploadForm'+id; //Watchforanewsetofrequests if(s.global&&!jQuery.active++) { jQuery.event.trigger("ajaxStart"); } varrequestDone=false; //Createtherequestobject varxml={} if(s.global) jQuery.event.trigger("ajaxSend",[xml,s]); //Waitforaresponsetocomeback varuploadCallback=function(isTimeout) { vario=document.getElementById(frameId); try { if(io.contentWindow) { xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }elseif(io.contentDocument) { xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null; xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }catch(e) { jQuery.handleError(s,xml,null,e); } if(xml||isTimeout=="timeout") { requestDone=true; varstatus; try{ status=isTimeout!="timeout"?"success":"error"; //Makesurethattherequestwassuccessfulornotmodified if(status!="error") { //processthedata(runsthexmlthroughhttpDataregardlessofcallback) vardata=jQuery.uploadHttpData(xml,s.dataType); //Ifalocalcallbackwasspecified,fireitandpassitthedata if(s.success) s.success(data,status); //Firetheglobalcallback if(s.global) jQuery.event.trigger("ajaxSuccess",s]); }else jQuery.handleError(s,status); }catch(e) { status="error"; jQuery.handleError(s,status,e); } //Therequestwascompleted if(s.global) jQuery.event.trigger("ajaxComplete",s]); //HandletheglobalAJAXcounter if(s.global&&!--jQuery.active) jQuery.event.trigger("ajaxStop"); //Processresult if(s.complete) s.complete(xml,status); jQuery(io).unbind() setTimeout(function() {try { jQuery(io).remove(); jQuery(form).remove(); }catch(e) { jQuery.handleError(s,e); } },100) xml=null } } //Timeoutchecker if(s.timeout>0) { setTimeout(function(){ //Checktoseeiftherequestisstillhappening if(!requestDone)uploadCallback("timeout"); },s.timeout); } try { varform=jQuery('#'+formId); jQuery(form).attr('action',s.url); jQuery(form).attr('method','POST'); jQuery(form).attr('target',frameId); if(form.encoding) { jQuery(form).attr('encoding','multipart/form-data'); } else { jQuery(form).attr('enctype','multipart/form-data'); } jQuery(form).submit(); }catch(e) { jQuery.handleError(s,e); } jQuery('#'+frameId).load(uploadCallback); return{abort:function(){}}; },uploadHttpData:function(r,type){ vardata=!type; data=type=="xml"||data?r.responseXML:r.responseText; //Ifthetypeis"script",evalitinglobalcontext if(type=="script") jQuery.globalEval(data); //GettheJavaScriptobject,ifJSONisused. if(type=="json") eval("data="+data); //evaluatescriptswithinhtml if(type=="html") jQuery("<div>").html(data).evalScripts(); returndata; } })
<!--数据提交filesubmit--> functiondoSubmit(){ varfileupload=document.getElementById("fileupload").value; if(""==fileupload){ varmsgArea=document.getElementById("msgArea"); msgArea.innerHTML='<fontcolor="red"style="margin-left:10px">请选择上传文件!</font>'; returnfalse; } varextension=newString(fileupload.substring(fileupload.lastIndexOf(".")+1,fileupload.length));//文件扩展名 if(extension=="doc"||extension=="docx"||extension=="pdf"||extension=="xls"||extension=="xlsx"){ vararchivesfileid=document.getElementById("archivesfileid").value $.ajaxFileUpload ( { url:'${ctx}/addArchives/addFile/'+archivesfileid,//用于文件上传的服务器端请求地址 secureuri:false,//一般设置为false fileElementId:'fileupload',//文件上传空间的id属性<inputtype="file"id="file"name="file"/> dataType:'json',//返回值类型一般设置为json success:function(data)//服务器成功响应处理函数 { appendList(data.fjid,data.fjmc,data.path,data.wjlx); },error:function(data,e)//服务器响应失败处理函数 { alert(data.msg);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量 } } ) }else{ alert("请选择word,excl或者pdf格式的文件!"); returnfalse; } }
前台展示代码 <divstyle="width:100%;height:170px;"> <divstyle="width:100%;"> <divstyle="width:100%;height:40px;"> <span><spanclass="col_left"style="font-size:12;"></span> <inputtype="file"class="must"name="fileupload" id="fileupload"size="30"style="margin:2px0px2px0px" onkeydown="event.returnValue=false;"onpaste="returnfalse"/> <inputtype="hidden"name="YXBZ"value="0"><input type="button"name="upLoadPic"value="上传"style="cursor:hand" class="btnbtn-success"onclick="doSubmit()"/> </span> </div> <divid="msgArea"></div> <div> <span><spanid="fhCreateFileList"></span> </span> </div> </div> </div>原文链接:https://www.f2er.com/ajax/164284.html