jquery与ajax实现上传文件并显示.docx

上传人:b****6 文档编号:4687278 上传时间:2022-12-07 格式:DOCX 页数:12 大小:232.15KB
下载 相关 举报
jquery与ajax实现上传文件并显示.docx_第1页
第1页 / 共12页
jquery与ajax实现上传文件并显示.docx_第2页
第2页 / 共12页
jquery与ajax实现上传文件并显示.docx_第3页
第3页 / 共12页
jquery与ajax实现上传文件并显示.docx_第4页
第4页 / 共12页
jquery与ajax实现上传文件并显示.docx_第5页
第5页 / 共12页
点击查看更多>>
下载资源
资源描述

jquery与ajax实现上传文件并显示.docx

《jquery与ajax实现上传文件并显示.docx》由会员分享,可在线阅读,更多相关《jquery与ajax实现上传文件并显示.docx(12页珍藏版)》请在冰豆网上搜索。

jquery与ajax实现上传文件并显示.docx

jquery与ajax实现上传文件并显示

Ajax实现上传文件

★在VisualStudio2005中,新建网站命名为TestAjaxUpload,如图:

在网站上添加两个新建文件夹js和Temp文件

js文件夹下添加两个文件ajaxfileupload.js和jquery-1.7.1.min.js

★其中jquery-1.7.1.min.js的下载地址可以来自:

http:

//119.147.135.173/4/

★其中ajaxfileupload.js的代码如下:

jQuery.extend({

createUploadIframe:

function(id,uri){

//创建frame

varframeId='jUploadFrame'+id;

variframeHtml='

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('');

if(data){

for(variindata){

jQuery('').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(plete)

plete(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("

").html(data).evalScripts();

returndata;

}

})

★在Default.aspx中的代码如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

测试ajax上传图片

functionajaxFileUpload(){

$("#loading")

.ajaxStart(function(){

$(this).show();

})

.ajaxComplete(function(){

$(this).hide();

});

$.ajaxFileUpload(

{

url:

'Handler.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("");

}

}

},

error:

function(data,status,e){

alert(e);

}

}

returnfalse;

}

上传

none;">

★在网站目录下新建一个“一般处理程序”Handler.ashx,用于处理文件上传到服务器。

如下:

Handler.ashx的代码如下:

<%@WebHandlerLanguage="C#"Class="Handler"%>

usingSystem;

usingSystem.Web;

usingSystem.IO;

publicclassHandler:

IHttpHandler{

//publicvoidProcessRequest(HttpContextcontext){

//context.Response.ContentType="text/plain";

//context.Response.Write("HelloWorld");

//}

//publicboolIsReusable{

//get{

//returnfalse;

//}

//}

publicvoidProcessRequest(HttpContextcontext)

{

if(context.Request.Files.Count>0)

{

stringpath=context.Server.MapPath("Temp");

if(!

Directory.Exists(path))

Directory.CreateDirectory(path);

HttpPostedFilefile=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

{

strFileName=DateTime.Now.ToString("yyyyMMdd_HHmmss_fff")+fileName.Substring(fileName.IndexOf('.'));

fileName=Path.Combine(path,strFileName);

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;

}

}

}

★整个测试网站的文件列表如下图:

运行网站如下图:

点击上传(可多次点击上传,来连续上传多个),在Temp文件夹(刷新)下可以看到上传后的文件,如图:

参考文档来自:

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 高中教育 > 理化生

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1