ajaxFileUpload 文件上传下载

前端之家收集整理的这篇文章主要介绍了ajaxFileUpload 文件上传下载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需要引用 的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>

猜你在找的Ajax相关文章