您的位置：首页 > 其它

AjaxFileUploader上传插件兼容性好 Ie Chrome Firefox

2012-02-13 21:55 399 查看

html:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="js/jquery-1.7.1.min.js"type="text/javascript"></script>
<scriptsrc="js/ajaxfileupload.js"type="text/javascript"></script>
</head>
<body>
<formid="form1"runat="server">
<div>
<inputid="fileToUpload"type="file"size="45"name="fileToUpload"class="input"/>
<buttonid="buttonUpload"onclick="returnajaxFileUpload();">
上传</button>
<imgid="loading"src="/images/loading.gif"style="display:none;"/>
<divid="imgshow"style="display:none;">
</div>
</div>
</form>
<scripttype="text/javascript">
functionajaxFileUpload(){
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});

$.ajaxFileUpload(
{
url:'/ajax/AjaxFileUploader.ashx',
secureuri:false,
fileElementId:'fileToUpload',
dataType:'json',
data:{name:'logan',id:'id'},
success:function(data,status){
if(typeof(data.error)!=='undefined'){
if(data.error!==''){
alert(data.error);
}else{
//alert(data.msg);
$('#imgshow').show();
$('#imgshow').append("<imgsrc='/Temp/"+data.msg+"'width='100'height='60'/>");
}
}
},
error:function(data,status,e){
alert(e);
}
}
)

returnfalse;

}
</script>
</body>
</html>

服务端:

usingSystem.Web;
usingSystem.IO;
namespaceAjaxFileUploader.ajax
{
///<summary>
///AjaxFileUploader的摘要说明
///</summary>
publicclassAjaxFileUploader:IHttpHandler
{

publicvoidProcessRequest(HttpContextcontext)
{
if(context.Request.Files.Count>0)
{
stringpath=context.Server.MapPath("~/Temp");
if(!Directory.Exists(path))
Directory.CreateDirectory(path);

varfile=context.Request.Files[0];

stringfileName;

if(HttpContext.Current.Request.Browser.Browser.ToUpper()=="IE")
{
string[]files=file.FileName.Split(newchar[]{'\\'});
fileName=files[files.Length-1];
}
else
{
fileName=file.FileName;
}

stringmsg="";
stringstrFileName=fileName;
if(string.IsNullOrEmpty(strFileName))
{
msg="{";
msg+=string.Format("error:'{0}',\n","请选择文件！");
msg+=string.Format("msg:'{0}'\n",string.Empty);
msg+="}";
}
else
{
fileName=Path.Combine(path,fileName);
file.SaveAs(fileName);

msg="{";
msg+=string.Format("error:'{0}',\n",string.Empty);
msg+=string.Format("msg:'{0}'\n",strFileName);
msg+="}";
}
context.Response.Write(msg);

}
}

publicboolIsReusable
{
get
{
returntrue;
}
}
}
}

插件:

//ajaxfileupload.js
jQuery.extend({
createUploadIframe:function(id,uri){
//创建frame
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){
//创建frame
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);

//设置属性
jQuery(form).css('position','absolute');
jQuery(form).css('top','-1200px');
jQuery(form).css('left','-1200px');
jQuery(form).appendTo('body');
returnform;
},

ajaxFileUpload:function(s){
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;
//监控请求
if(s.global&&!jQuery.active++){
jQuery.event.trigger("ajaxStart");
}
varrequestDone=false;
//创建请求对象
varxml={}
if(s.global)
jQuery.event.trigger("ajaxSend",[xml,s]);
//等待一个响应返回
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";
//请求成功
if(status!="error"){
//处理数据
vardata=jQuery.uploadHttpData(xml,s.dataType);
if(s.success)
s.success(data,status);
//触发全局返回
if(s.global)
jQuery.event.trigger("ajaxSuccess",[xml,s]);
}else
jQuery.handleError(s,xml,status);
}catch(e){
status="error";
jQuery.handleError(s,xml,status,e);
}

//请求完成
if(s.global)
jQuery.event.trigger("ajaxComplete",[xml,s]);

//处理全局AJAX计数器
if(s.global&&!--jQuery.active)
jQuery.event.trigger("ajaxStop");

//处理结果
if(s.complete)
s.complete(xml,status);

jQuery(io).unbind()

setTimeout(function(){
try{
jQuery(io).remove();
jQuery(form).remove();

}catch(e){
jQuery.handleError(s,xml,null,e);
}

},100)

xml=null

}
}
//超时检查
if(s.timeout>0){
setTimeout(function(){
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,xml,null,e);
}

jQuery('#'+frameId).load(uploadCallback);
return{abort:function(){}};

},

uploadHttpData:function(r,type){
vardata=!type;
data=type=="xml"||data?r.responseXML:r.responseText;
if(type=="script")
jQuery.globalEval(data);
if(type=="json")
eval("data="+data);
if(type=="html")
jQuery("<div>").html(data).evalScripts();
returndata;
}
})

更多上传插件http://www.cnblogs.com/zengxiangzhan/category/269831.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

AjaxFileUploader上传插件 兼容性好 Ie Chrome Firefox

AjaxFileUploader上传插件兼容性好 Ie Chrome Firefox