Javascript与asp.net 实现Ajax多文件无刷新上传
这几天在等着上班，闲来无事，就写了一个无刷新的上传功能，这个上传只是实现局部刷新，我已经把方法都整理好，可以随意添加多个上传控件，只要调用一个方法就可以了，为了便于阅读我没有把JS独立出来，以后真正用到项目上的时候再提出来，我在每个方法上面都写了注视，具体可以看代码部分，现在一直在用JQuery，它提供的方法太好用的，剩了很多事。
此方法主要是通过iFrame调用上传页的控件来实现的，具体请看下面的代码。
[img=544,603]http://www.cnblogs.com/images/cnblogs_com/huacn/ajaxuploadv1.PNG[/img]
无刷新上传主要的HTML代码（upload.html）：
[size=13px][color=#0000ff]<![/color][color=#ff00ff]DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]html [/color][color=#ff0000]xmlns[/color][color=#0000ff]="http://www.w3.org/1999/xhtml"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]head[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]title[/color][color=#0000ff]>[/color][color=#000000]AjaxUpload[/color][color=#0000ff]</[/color][color=#800000]title[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]meta [/color][color=#ff0000]http-equiv[/color][color=#0000ff]="Content-Type"[/color][color=#ff0000] content[/color][color=#0000ff]="text/html; charset=utf-8"[/color]
[color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]script [/color][color=#ff0000]type[/color][color=#0000ff]="text/javascript"[/color][color=#ff0000] src[/color][color=#0000ff]="scripts/jquery.js"[/color][color=#0000ff]></[/color][color=#800000]script[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]script [/color][color=#ff0000]type[/color][color=#0000ff]="text/javascript"[/color][color=#ff0000] src[/color][color=#0000ff]="scripts/interface.js"[/color][color=#0000ff]></[/color][color=#800000]script[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]style [/color][color=#ff0000]type[/color][color=#0000ff]="text/css"[/color][color=#ff0000] media[/color][color=#0000ff]="all"[/color][color=#0000ff]>[/color][color=#800000]
*[/color][color=#000000]{[/color][color=#ff0000]
margin[/color][color=#000000]:[/color][color=#0000ff]0[/color][color=#000000];[/color][color=#ff0000]
padding[/color][color=#000000]:[/color][color=#0000ff]0[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
img[/color][color=#000000]{[/color][color=#ff0000]border[/color][color=#000000]:[/color][color=#0000ff]none[/color][color=#000000];[/color][color=#000000]}[/color][color=#800000]
ul[/color][color=#000000]{[/color][color=#ff0000]
list-style-type[/color][color=#000000]:[/color][color=#0000ff]none[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
ul li[/color][color=#000000]{[/color][color=#ff0000]
padding[/color][color=#000000]:[/color][color=#0000ff]2px 4px[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
body[/color][color=#000000]{[/color][color=#ff0000]
font-family[/color][color=#000000]:[/color][color=#0000ff] 宋体, 黑体,verdana, Arial[/color][color=#000000];[/color][color=#ff0000]
font-size[/color][color=#000000]:[/color][color=#0000ff]12px[/color][color=#000000];[/color][color=#ff0000]
color[/color][color=#000000]:[/color][color=#0000ff]#333[/color][color=#000000];[/color][color=#ff0000]
background[/color][color=#000000]:[/color][color=#0000ff]#DDDDDD[/color][color=#000000];[/color][color=#ff0000]
margin[/color][color=#000000]:[/color][color=#0000ff]30px[/color][color=#000000];[/color][color=#ff0000]
padding[/color][color=#000000]:[/color][color=#0000ff]0[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.box[/color][color=#000000]{[/color][color=#ff0000]
border[/color][color=#000000]:[/color][color=#0000ff]1px solid #CCC[/color][color=#000000];[/color][color=#ff0000]
background[/color][color=#000000]:[/color][color=#0000ff]#FFF[/color][color=#000000];[/color][color=#ff0000]
padding[/color][color=#000000]:[/color][color=#0000ff]8px[/color][color=#000000];[/color][color=#ff0000]
margin[/color][color=#000000]:[/color][color=#0000ff]5px[/color][color=#000000];[/color][color=#ff0000]
clear[/color][color=#000000]:[/color][color=#0000ff]both[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.title [/color][color=#000000]{[/color][color=#ff0000]
background[/color][color=#000000]:[/color][color=#0000ff]#F0F0F0[/color][color=#000000];[/color][color=#ff0000]padding[/color][color=#000000]:[/color][color=#0000ff]5px[/color][color=#000000];[/color][color=#ff0000]
font-weight[/color][color=#000000]:[/color][color=#0000ff]bold[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.tooltip[/color][color=#000000]{[/color][color=#ff0000]
background[/color][color=#000000]:[/color][color=#0000ff]#F0F0F0[/color][color=#000000];[/color][color=#ff0000]
border-color[/color][color=#000000]:[/color][color=#0000ff]#bbb[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.tooltip h1 [/color][color=#000000]{[/color][color=#ff0000]
color[/color][color=#000000]:[/color][color=#0000ff]#A8DF00[/color][color=#000000];[/color][color=#ff0000]
font-family[/color][color=#000000]:[/color][color=#0000ff] 微软雅黑,黑体,宋体,verdana, Arial[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.titlebutton[/color][color=#000000]{[/color][color=#ff0000]
float[/color][color=#000000]:[/color][color=#0000ff]right[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.uploading[/color][color=#000000]{[/color][color=#ff0000]
background[/color][color=#000000]:[/color][color=#0000ff]#FFF[/color][color=#000000];[/color][color=#ff0000]
color[/color][color=#000000]:[/color][color=#0000ff]#444[/color][color=#000000];[/color][color=#ff0000]
text-align[/color][color=#000000]:[/color][color=#0000ff]left[/color][color=#000000];[/color][color=#ff0000]
width[/color][color=#000000]:[/color][color=#0000ff]500px[/color][color=#000000];[/color][color=#ff0000]
padding[/color][color=#000000]:[/color][color=#0000ff]4px[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.image[/color][color=#000000]{[/color][color=#ff0000]
border[/color][color=#000000]:[/color][color=#0000ff]1px solid #ddd[/color][color=#000000];[/color][color=#ff0000]
margin[/color][color=#000000]:[/color][color=#0000ff]2px[/color][color=#000000];[/color][color=#ff0000]
padding[/color][color=#000000]:[/color][color=#0000ff]1px[/color][color=#000000];[/color][color=#ff0000]
display[/color][color=#000000]:[/color][color=#0000ff]inline[/color][color=#000000];[/color][color=#ff0000]
width[/color][color=#000000]:[/color][color=#0000ff]300px[/color][color=#000000];[/color]
[color=#000000]}[/color][color=#800000]
.uploadcontrol [/color][color=#000000]{[/color][color=#ff0000]
margin[/color][color=#000000]:[/color][color=#0000ff]4px 0[/color][color=#000000];[/color][color=#ff0000]
border-bottom[/color][color=#000000]:[/color][color=#0000ff]1px solid #F0F0F0[/color][color=#000000];[/color]
[color=#000000]}[/color]
[color=#0000ff]</[/color][color=#800000]style[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]script [/color][color=#ff0000]type[/color][color=#0000ff]="text/javascript"[/color][color=#0000ff]>[/color][color=#000000]
$(document).ready([/color][color=#0000ff]function[/color][color=#000000](){
[/color][color=#0000ff]for[/color][color=#000000]([/color][color=#0000ff]var[/color][color=#000000] i[/color][color=#000000]=[/color][color=#000000]0[/color][color=#000000];i[/color][color=#000000]<[/color][color=#000000]5[/color][color=#000000];i[/color][color=#000000]++[/color][color=#000000])
{
uploadcreate($([/color][color=#000000]"[/color][color=#000000]#uploadbox[/color][color=#000000]"[/color][color=#000000]),i);
}
});
[/color][color=#0000ff]var[/color][color=#000000] hideDiv [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](idName){
$([/color][color=#000000]"[/color][color=#000000]#[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]idName).fadeOut([/color][color=#000000]"[/color][color=#000000]fast[/color][color=#000000]"[/color][color=#000000]);
};
[/color][color=#008000]//[/color][color=#008000]是否显示上传后的图片[/color]
[color=#0000ff]var[/color][color=#000000] isshowpic [/color][color=#000000]=[/color]
[color=#0000ff]true[/color][color=#000000];
[/color][color=#0000ff]var[/color][color=#000000] uploadshowpic [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](el){
isshowpic [/color][color=#000000]=[/color]
[color=#000000]![/color][color=#000000](isshowpic);
[/color][color=#0000ff]if[/color][color=#000000](isshowpic)
{
el.html([/color][color=#000000]"[/color][color=#000000]图片显示关闭[/color][color=#000000]"[/color][color=#000000]);
}
[/color][color=#0000ff]else[/color][color=#000000]
{
el.html([/color][color=#000000]"[/color][color=#000000]图片显示开启[/color][color=#000000]"[/color][color=#000000]);
}
};
[/color][color=#008000]//[/color][color=#008000]载入中的GIF动画[/color]
[color=#0000ff]var[/color][color=#000000] loadingUrl [/color][color=#000000]=[/color]
[color=#000000]"[/color][color=#000000]images/ajax-loader.gif[/color][color=#000000]"[/color][color=#000000];
[/color][color=#008000]//[/color][color=#008000]选择文件后的事件,iframe里面调用的[/color]
[color=#0000ff]var[/color][color=#000000] uploading [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](imgsrc,itemid){
[/color][color=#0000ff]var[/color][color=#000000] el [/color][color=#000000]=[/color][color=#000000] $([/color][color=#000000]"[/color][color=#000000]#uploading[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid);
$([/color][color=#000000]"[/color][color=#000000]#ifUpload[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid).fadeOut([/color][color=#000000]"[/color][color=#000000]fast[/color][color=#000000]"[/color][color=#000000]);
el.fadeIn([/color][color=#000000]"[/color][color=#000000]fast[/color][color=#000000]"[/color][color=#000000]);
el.html([/color][color=#000000]"[/color][color=#000000]<img src='[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]loadingUrl[/color][color=#000000]+[/color][color=#000000]"[/color][color=#000000]' align='absmiddle' /> 上传中[img]http://www.cnblogs.com/Images/dot.gif[/img][/color][color=#000000]"[/color][color=#000000]);
[/color][color=#0000ff]return[/color][color=#000000] el;
};
[/color][color=#008000]//[/color][color=#008000]重新上传方法 [/color]
[color=#0000ff]var[/color][color=#000000] uploadinit [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](itemid){
currentItemID [/color][color=#000000]++[/color][color=#000000];
$([/color][color=#000000]"[/color][color=#000000]#uploading[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid).fadeOut([/color][color=#000000]"[/color][color=#000000]fast[/color][color=#000000]"[/color][color=#000000],[/color][color=#0000ff]function[/color][color=#000000](){
$([/color][color=#000000]"[/color][color=#000000]#ifUpload[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid).fadeIn([/color][color=#000000]"[/color][color=#000000]fast[/color][color=#000000]"[/color][color=#000000]);
$([/color][color=#000000]"[/color][color=#000000]#panelViewPic[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid).fadeOut([/color][color=#000000]"[/color][color=#000000]fast[/color][color=#000000]"[/color][color=#000000]);
});
};
[/color][color=#008000]//[/color][color=#008000]上传时程序发生错误时，给提示，并返回上传状态[/color]
[color=#0000ff]var[/color][color=#000000] uploaderror [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](itemid){
alert([/color][color=#000000]"[/color][color=#000000]程序异常，[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid[/color][color=#000000]+[/color][color=#000000]"[/color][color=#000000]项上传未成功。[/color][color=#000000]"[/color][color=#000000]);
uploadinit();
};
[/color][color=#008000]//[/color][color=#008000]上传成功后的处理[/color]
[color=#0000ff]var[/color][color=#000000] uploadsuccess [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](newpath,itemid){
$([/color][color=#000000]"[/color][color=#000000]#uploading[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid).html([/color][color=#000000]"[/color][color=#000000]文件上传成功. <a href='javascript:void(0);' onclick='uploadinit([/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid[/color][color=#000000]+[/color][color=#000000]"[/color][color=#000000]);'>[重新上传]</a>[/color][color=#000000]"[/color][color=#000000]);
[/color][color=#0000ff]if[/color][color=#000000](isshowpic)
{
$([/color][color=#000000]"[/color][color=#000000]#panelViewPic[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid).html([/color][color=#000000]"[/color][color=#000000]<a href='[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]newpath[/color][color=#000000]+[/color][color=#000000]"[/color][color=#000000]' title='点击查看大图' target='_blank'><img src='[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]newpath[/color][color=#000000]+[/color][color=#000000]"[/color][color=#000000]' alt='' style='width:300px;' /></a>[/color][color=#000000]"[/color][color=#000000]);
$([/color][color=#000000]"[/color][color=#000000]#panelViewPic[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000]itemid).fadeIn([/color][color=#000000]"[/color][color=#000000]fast[/color][color=#000000]"[/color][color=#000000]);
}
};
[/color][color=#0000ff]var[/color][color=#000000] currentItemID [/color][color=#000000]=[/color]
[color=#000000]0[/color][color=#000000]; [/color][color=#008000]//[/color][color=#008000]用于存放共有多少个上传控件了[/color]
[color=#008000]//[/color][color=#008000]创建一个上传控件[/color]
[color=#0000ff]var[/color][color=#000000] uploadcreate [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](el,itemid){
currentItemID [/color][color=#000000]++[/color][color=#000000];
[/color][color=#0000ff]if[/color][color=#000000](itemid [/color][color=#000000]==[/color]
[color=#0000ff]null[/color][color=#000000])
{
itemid [/color][color=#000000]=[/color][color=#000000] currentItemID;
}
[/color][color=#0000ff]var[/color][color=#000000] strContent [/color][color=#000000]=[/color]
[color=#000000]"[/color][color=#000000]<div class='uploadcontrol'><iframe src=\[/color][color=#000000]"[/color][color=#000000]upload.aspx[/color][color=#000000]?[/color][color=#000000]id[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]+itemid+[/color][color=#000000]"[/color][color=#000000]\[/color][color=#000000]"[/color][color=#000000] id=\[/color][color=#000000]"[/color][color=#000000]ifUpload[/color][color=#000000]"[/color][color=#000000]+itemid+[/color][color=#000000]"[/color][color=#000000]\[/color][color=#000000]"[/color][color=#000000] frameborder=\[/color][color=#000000]"[/color][color=#000000]no\[/color][color=#000000]"[/color][color=#000000] scrolling=\[/color][color=#000000]"[/color][color=#000000]no\[/color][color=#000000]"[/color][color=#000000] style=\[/color][color=#000000]"[/color][color=#000000]width:400px; height:28px;\[/color][color=#000000]"[/color][color=#000000]></iframe>[/color][color=#000000]"[/color][color=#000000];
strContent [/color][color=#000000]+=[/color]
[color=#000000]"[/color][color=#000000]<div class=\[/color][color=#000000]"[/color][color=#000000]uploading\[/color][color=#000000]"[/color][color=#000000] id=\[/color][color=#000000]"[/color][color=#000000]uploading[/color][color=#000000]"[/color][color=#000000]+itemid+[/color][color=#000000]"[/color][color=#000000]\[/color][color=#000000]"[/color][color=#000000] style=\[/color][color=#000000]"[/color][color=#000000]display:none;\[/color][color=#000000]"[/color][color=#000000] ></div>[/color][color=#000000]"[/color][color=#000000];
strContent [/color][color=#000000]+=[/color]
[color=#000000]"[/color][color=#000000]<div class=\[/color][color=#000000]"[/color][color=#000000]image\[/color][color=#000000]"[/color][color=#000000] id=\[/color][color=#000000]"[/color][color=#000000]panelViewPic[/color][color=#000000]"[/color][color=#000000]+itemid+[/color][color=#000000]"[/color][color=#000000]\[/color][color=#000000]"[/color][color=#000000] style=\[/color][color=#000000]"[/color][color=#000000]display:none;\[/color][color=#000000]"[/color][color=#000000]></div></div>[/color][color=#000000]"[/color][color=#000000];
el.append(strContent);
};
[/color][color=#0000ff]</[/color][color=#800000]script[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]head[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]body[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]div [/color][color=#ff0000]id[/color][color=#0000ff]="tipbox"[/color][color=#ff0000] class[/color][color=#0000ff]="box tooltip"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]a [/color][color=#ff0000]href[/color][color=#0000ff]="#"[/color][color=#ff0000] onclick[/color][color=#0000ff]="hideDiv('tipbox');"[/color][color=#0000ff]>[/color][color=#000000][关闭][/color][color=#0000ff]</[/color][color=#800000]a[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]div [/color][color=#ff0000]class[/color][color=#0000ff]="content"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]h1[/color][color=#0000ff]>[/color][color=#000000]AjaxUpload - 多文件无刷新上传源代码 v1.0[/color][color=#0000ff]</[/color][color=#800000]h1[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]p[/color][color=#0000ff]>[/color][color=#000000]作者:李华顺 [/color][color=#0000ff]<[/color][color=#800000]a [/color][color=#ff0000]href[/color][color=#0000ff]="http://huacn.cnblogs.com"[/color][color=#ff0000] target[/color][color=#0000ff]="_blank"[/color][color=#0000ff]>[/color][color=#000000]http://huacn.cnblogs.com[/color][color=#0000ff]</[/color][color=#800000]a[/color][color=#0000ff]></[/color][color=#800000]p[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]div[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]div[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]div [/color][color=#ff0000]id[/color][color=#0000ff]="toolbox"[/color][color=#ff0000] class[/color][color=#0000ff]="tooltip box"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]a [/color][color=#ff0000]href[/color][color=#0000ff]="#"[/color][color=#ff0000] onclick[/color][color=#0000ff]="uploadcreate($('#uploadbox'));"[/color][color=#0000ff]>[/color][color=#000000]添加一个新上传控件[/color][color=#0000ff]</[/color][color=#800000]a[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]a [/color][color=#ff0000]href[/color][color=#0000ff]="#"[/color][color=#ff0000] onclick[/color][color=#0000ff]="uploadshowpic($(this));"[/color][color=#0000ff]>[/color][color=#000000]图片显示关闭[/color][color=#0000ff]</[/color][color=#800000]a[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]div[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]div [/color][color=#ff0000]id[/color][color=#0000ff]="uploadbox"[/color][color=#ff0000] class[/color][color=#0000ff]="box"[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]div[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]body[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]html[/color][color=#0000ff]>[/color]
[/size]
上传功能的页面代码（upload.aspx）：
[size=13px][color=#000000]<%[/color][color=#000000]@ Page Language[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]C#[/color][color=#000000]"[/color][color=#000000] AutoEventWireup[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]true[/color][color=#000000]"[/color][color=#000000] CodeFile[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]upload.aspx.cs[/color][color=#000000]"[/color][color=#000000] Inherits[/color][color=#000000]=[/color][color=#000000]"[/color][color=#000000]upload[/color][color=#000000]"[/color]
[color=#000000]%>[/color]
[color=#0000ff]<![/color][color=#ff00ff]DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]html [/color][color=#ff0000]xmlns[/color][color=#0000ff]="http://www.w3.org/1999/xhtml"[/color]
[color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]head [/color][color=#ff0000]runat[/color][color=#0000ff]="server"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]title[/color][color=#0000ff]>[/color][color=#000000]上传[/color][color=#0000ff]</[/color][color=#800000]title[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]meta [/color][color=#ff0000]http-equiv[/color][color=#0000ff]="Content-Type"[/color][color=#ff0000] content[/color][color=#0000ff]="text/html; charset=utf-8"[/color]
[color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]script [/color][color=#ff0000]type[/color][color=#0000ff]="text/javascript"[/color][color=#ff0000] src[/color][color=#0000ff]="scripts/jquery.js"[/color][color=#0000ff]></[/color][color=#800000]script[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]script [/color][color=#ff0000]type[/color][color=#0000ff]="text/javascript"[/color][color=#ff0000] src[/color][color=#0000ff]="scripts/interface.js"[/color][color=#0000ff]></[/color][color=#800000]script[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]style [/color][color=#ff0000]type[/color][color=#0000ff]="text/css"[/color][color=#0000ff]>[/color][color=#800000]
*[/color][color=#000000]{[/color][color=#ff0000] margin[/color][color=#000000]:[/color][color=#0000ff]0[/color][color=#000000];[/color][color=#ff0000] padding[/color][color=#000000]:[/color][color=#0000ff]0[/color][color=#000000];[/color]
[color=#000000]}[/color]
[color=#0000ff]</[/color][color=#800000]style[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]script [/color][color=#ff0000]type[/color][color=#0000ff]="text/javascript"[/color][color=#0000ff]>[/color]
[color=#0000ff]var[/color][color=#000000] uploadSelect [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](el){
el.fadeOut([/color][color=#000000]"[/color][color=#000000]show[/color][color=#000000]"[/color][color=#000000]);
parent.uploading(document.getElementById([/color][color=#000000]"[/color][color=#000000]<%=file1.ClientID %>[/color][color=#000000]"[/color][color=#000000]).value,'[/color][color=#000000]<%=[/color][color=#000000]itemID [/color][color=#000000]%>[/color][color=#000000]');
$([/color][color=#000000]"[/color][color=#000000]#<%=frmUpload.ClientID %>[/color][color=#000000]"[/color][color=#000000]).submit();
};
[/color][color=#0000ff]</[/color][color=#800000]script[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]head[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]body[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]form [/color][color=#ff0000]runat[/color][color=#0000ff]="server"[/color][color=#ff0000] id[/color][color=#0000ff]="frmUpload"[/color][color=#ff0000] method[/color][color=#0000ff]="post"[/color][color=#ff0000] enctype[/color][color=#0000ff]="multipart/form-data"[/color][color=#0000ff]>[/color]
[color=#0000ff]<[/color][color=#800000]input [/color][color=#ff0000]type[/color][color=#0000ff]="file"[/color][color=#ff0000] runat[/color][color=#0000ff]="server"[/color][color=#ff0000] id[/color][color=#0000ff]="file1"[/color][color=#ff0000] size[/color][color=#0000ff]="40"[/color][color=#ff0000] onchange[/color][color=#0000ff]="uploadSelect($(this));"[/color]
[color=#0000ff]/>[/color]
[color=#0000ff]</[/color][color=#800000]form[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]body[/color][color=#0000ff]>[/color]
[color=#0000ff]</[/color][color=#800000]html[/color][color=#0000ff]>[/color]
[/size]
上传功能的服务端代码（upload.aspx.cs）
[size=13px][color=#0000ff]using[/color][color=#000000] System;
[/color][color=#0000ff]using[/color][color=#000000] System.Data;
[/color][color=#0000ff]using[/color][color=#000000] System.Configuration;
[/color][color=#0000ff]using[/color][color=#000000] System.Collections;
[/color][color=#0000ff]using[/color][color=#000000] System.Web;
[/color][color=#0000ff]using[/color][color=#000000] System.Web.Security;
[/color][color=#0000ff]using[/color][color=#000000] System.Web.UI;
[/color][color=#0000ff]using[/color][color=#000000] System.Web.UI.WebControls;
[/color][color=#0000ff]using[/color][color=#000000] System.Web.UI.WebControls.WebParts;
[/color][color=#0000ff]using[/color][color=#000000] System.Web.UI.HtmlControls;
[/color][color=#0000ff]using[/color][color=#000000] System.IO;
[/color][color=#0000ff]public[/color][color=#000000] partial [/color][color=#0000ff]class[/color][color=#000000] upload : System.Web.UI.Page
{
[/color][color=#0000ff]string[/color][color=#000000] picPath [/color][color=#000000]=[/color]
[color=#000000]""[/color][color=#000000];
[/color][color=#0000ff]string[/color][color=#000000] picServer [/color][color=#000000]=[/color]
[color=#000000]"[/color][color=#000000]/upload[/color][color=#000000]"[/color][color=#000000];
[/color][color=#0000ff]protected[/color]
[color=#0000ff]string[/color][color=#000000] itemID [/color][color=#000000]=[/color]
[color=#000000]""[/color][color=#000000];
[/color][color=#0000ff]protected[/color]
[color=#0000ff]void[/color][color=#000000] Page_Load([/color][color=#0000ff]object[/color][color=#000000] sender, EventArgs e)
{
[/color][color=#0000ff]if[/color][color=#000000] (Request.QueryString[[/color][color=#000000]"[/color][color=#000000]id[/color][color=#000000]"[/color][color=#000000]] [/color][color=#000000]!=[/color]
[color=#0000ff]null[/color][color=#000000])
{
itemID [/color][color=#000000]=[/color][color=#000000] Request.QueryString[[/color][color=#000000]"[/color][color=#000000]id[/color][color=#000000]"[/color][color=#000000]];
}
[/color][color=#0000ff]if[/color][color=#000000] (IsPostBack)
{
picPath [/color][color=#000000]=[/color][color=#000000] Server.MapPath([/color][color=#000000]"[/color][color=#000000]\\upload[/color][color=#000000]"[/color][color=#000000]);
doUpload();
}
}
[/color][color=#0000ff]protected[/color]
[color=#0000ff]void[/color][color=#000000] doUpload()
{
[/color][color=#0000ff]try[/color][color=#000000]
{
HttpPostedFile file [/color][color=#000000]=[/color][color=#000000] file1.PostedFile;
[/color][color=#0000ff]string[/color][color=#000000] strNewPath [/color][color=#000000]=[/color][color=#000000] GetSaveFilePath() [/color][color=#000000]+[/color][color=#000000] GetExtension(file.FileName);
file.SaveAs(picPath[/color][color=#000000]+[/color][color=#000000]strNewPath);
[/color][color=#0000ff]string[/color][color=#000000] urlPath [/color][color=#000000]=[/color][color=#000000] picServer [/color][color=#000000]+[/color][color=#000000] strNewPath;
urlPath [/color][color=#000000]=[/color][color=#000000] urlPath.Replace([/color][color=#000000]"[/color][color=#000000]\\[/color][color=#000000]"[/color][color=#000000], [/color][color=#000000]"[/color][color=#000000]/[/color][color=#000000]"[/color][color=#000000]);
WriteJs([/color][color=#000000]"[/color][color=#000000]parent.uploadsuccess('[/color][color=#000000]"[/color]
[color=#000000]+[/color][color=#000000] urlPath [/color][color=#000000]+[/color]
[color=#000000]"[/color][color=#000000]','[/color][color=#000000]"[/color]
[color=#000000]+[/color][color=#000000] itemID [/color][color=#000000]+[/color]
[color=#000000]"[/color][color=#000000]'); [/color][color=#000000]"[/color][color=#000000]);
}
[/color][color=#0000ff]catch[/color][color=#000000] (Exception ex)
{
WriteJs([/color][color=#000000]"[/color][color=#000000]parent.uploaderror();[/color][color=#000000]"[/color][color=#000000]);
}
}
[/color][color=#0000ff]private[/color]
[color=#0000ff]string[/color][color=#000000] GetExtension([/color][color=#0000ff]string[/color][color=#000000] fileName)
{
[/color][color=#0000ff]try[/color][color=#000000]
{
[/color][color=#0000ff]int[/color][color=#000000] startPos [/color][color=#000000]=[/color][color=#000000] fileName.LastIndexOf([/color][color=#000000]"[/color][color=#000000].[/color][color=#000000]"[/color][color=#000000]);
[/color][color=#0000ff]string[/color][color=#000000] ext [/color][color=#000000]=[/color][color=#000000] fileName.Substring(startPos, fileName.Length [/color][color=#000000]-[/color][color=#000000] startPos);
[/color][color=#0000ff]return[/color][color=#000000] ext;
}
[/color][color=#0000ff]catch[/color][color=#000000] (Exception ex)
{
WriteJs([/color][color=#000000]"[/color][color=#000000]parent.uploaderror('[/color][color=#000000]"[/color]
[color=#000000]+[/color][color=#000000] itemID [/color][color=#000000]+[/color]
[color=#000000]"[/color][color=#000000]');[/color][color=#000000]"[/color][color=#000000]);
[/color][color=#0000ff]return[/color]
[color=#0000ff]string[/color][color=#000000].Empty;
}
}
[/color][color=#0000ff]private[/color]
[color=#0000ff]string[/color][color=#000000] GetSaveFilePath()
{
[/color][color=#0000ff]try[/color][color=#000000]
{
DateTime dateTime [/color][color=#000000]=[/color][color=#000000] DateTime.Now;
[/color][color=#0000ff]string[/color][color=#000000] yearStr [/color][color=#000000]=[/color][color=#000000] dateTime.Year.ToString(); ;
[/color][color=#0000ff]string[/color][color=#000000] monthStr [/color][color=#000000]=[/color][color=#000000] dateTime.Month.ToString();
[/color][color=#0000ff]string[/color][color=#000000] dayStr [/color][color=#000000]=[/color][color=#000000] dateTime.Day.ToString();
[/color][color=#0000ff]string[/color][color=#000000] hourStr [/color][color=#000000]=[/color][color=#000000] dateTime.Hour.ToString();
[/color][color=#0000ff]string[/color][color=#000000] minuteStr [/color][color=#000000]=[/color][color=#000000] dateTime.Minute.ToString();
[/color][color=#0000ff]string[/color][color=#000000] dir [/color][color=#000000]=[/color][color=#000000] dateTime.ToString([/color][color=#000000]@"[/color][color=#000000]\\yyyyMMdd[/color][color=#000000]"[/color][color=#000000]);
[/color][color=#0000ff]if[/color][color=#000000] ([/color][color=#000000]![/color][color=#000000]Directory.Exists(picPath [/color][color=#000000]+[/color][color=#000000] dir))
{
Directory.CreateDirectory(picPath [/color][color=#000000]+[/color][color=#000000] dir);
}
[/color][color=#0000ff]return[/color][color=#000000] dir [/color][color=#000000]+[/color][color=#000000] dateTime.ToString([/color][color=#000000]"[/color][color=#000000]\\\\yyyyMMddhhmmssffff[/color][color=#000000]"[/color][color=#000000]);
}
[/color][color=#0000ff]catch[/color][color=#000000] (Exception ex)
{
WriteJs([/color][color=#000000]"[/color][color=#000000]parent.uploaderror();[/color][color=#000000]"[/color][color=#000000]);
[/color][color=#0000ff]return[/color]
[color=#0000ff]string[/color][color=#000000].Empty;
}
}
[/color][color=#0000ff]protected[/color]
[color=#0000ff]void[/color][color=#000000] WriteJs([/color][color=#0000ff]string[/color][color=#000000] jsContent)
{
[/color][color=#0000ff]this[/color][color=#000000].Page.RegisterStartupScript([/color][color=#000000]"[/color][color=#000000]writejs[/color][color=#000000]"[/color][color=#000000],[/color][color=#000000]"[/color][color=#000000]<script type='text/javascript'>[/color][color=#000000]"[/color][color=#000000]+[/color][color=#000000] jsContent[/color][color=#000000]+[/color][color=#000000]"[/color][color=#000000]</script>[/color][color=#000000]"[/color][color=#000000]);
}
}
[/color][/size]
基本上就是这些，重点请看第一部份的代码，主要是JS控件显示，还有一个重点是upload.aspx调用父级页面的方法这些实现。
Javascript无刷新上传演示地址:[color=#0000cc]http://www.wathon.com/opensource/js/ajaxuploadv1/upload.html[/color]
源代码下载地址：[color=#0000cc]http://www.wathon.com/opensource/js/ajaxuploadv1/ajaxupload_src.zip[/color]
