今天在这里介绍一下ajax上传文件。其实也不算是真的使用xmlhttprequest上传，只是使用了iframe实现了无刷新上传而已，最多也只算是仿ajax上传文件。然而网上关于使用xmlhttprequest上传文件的却是少之又少。即使有，对其他浏览器的兼容也是不敢恭维。到是有专门的公司提供这样的解决方案,如：ajaxuploader.com提供各式各样的ajax上传方式。呵呵，只是它不是开源而且是针对.net平台的。废话少说了，我们今天就使用jquery+iframe来实现无刷新上传。以下是解决方案图：

（图1）

下面是上传完的界面：

接下来看一下主要代码：

1、在default.aspx页面，先引用jquery及其插件:

<script type="text/javascript" src="scripts/jquery.js"></script>
 <script type="text/javascript" src="scripts/interface.js"></script>

2、接着我们来看一下default.aspx页面的jquery代码,注解已经都在里面的，相信只要会jquery都能看得懂，我就不再啰嗦了。

<script type="text/javascript">$(document).ready(function(){
             uploadcreate($("#uploadbox"));
        });varhideDiv=function(idName){
             $("#"+idName).fadeOut("fast");
         };//载入中的GIF动画varloadingUrl="images/ajax-loader.gif";//选择文件后的事件,iframe里面调用的varuploading=function(imgsrc){varel=$("#uploading");
            $("#ifUpload").fadeOut("fast");
            el.fadeIn("fast");
            el.html("<img src='"+loadingUrl+"' align='absmiddle' /> 上传中");returnel;
        };//重新上传方法varuploadinit=function(){
            $("#uploading").fadeOut("fast",function(){
                 $("#ifUpload").fadeIn("fast");
            });
                   
        };//上传时程序发生错误时，给提示，并返回上传状态varuploaderror=function(){
            alert("程序异常，上传未成功。");
            uploadinit();
        };//上传成功后的处理varuploadsuccess=function(newpath){
            $("#txtContent").append("<img src=\""+newpath+"\"οnlοad=\"if(this.width>300){this.width=300;}\"/>");varel=$("#uploading");
            el.html("上传成功,<a href=\"javascript:void(0);\"οnclick=\"uploadinit();\">[重新上传]</a>.");
        };//创建一个上传控件varuploadcreate=function(el){varstrContent="<div class='uploadcontrol'><iframe src=\"upload.aspx\"id=\"ifUpload\"frameborder=\"no\"scrolling=\"no\"style=\"width:400px; height:28px;\"></iframe>";
            strContent+="<div class=\"uploading\"id=\"uploading\"style=\"display:none;\"></div>";
            strContent+="<div class=\"image\"id=\"panelViewPic\"style=\"display:none;\"></div></div>";
            el.append(strContent);
        };</script>

3、再来看一下upload.aspx页面都有哪些东西。

<script type="text/javascript">varuploadSelect=function(el){
            el.fadeOut("show");        
            parent.uploading(document.getElementById("file1").value);
            $("#frmUpload").submit();
        };</script>

当然在这个页面你也得做第一步该做的事，谁叫我们都用上了jquery呢，呵呵。

4、upload.aspx页面元素都有哪些呢？

<formrunat="server"id="frmUpload"method="post"enctype="multipart/form-data"><inputtype="file"runat="server"id="file1"size="40"onchange="uploadSelect($(this));"/></form>

记住一定要给form的method、enctype属性分别赋上"post"、"multipart/form-data"，这样才能保证upload.aspx.cs里面可以获取到上传的文件信息。

5、最后看一下upload.aspx.cs代码，都是些上传文件的代码，我只贴出部分的主要代码。

stringpicPath="";stringpicServer="upload";protectedvoidPage_Load(objectsender, EventArgs e)
    {if(IsPostBack)
        {
            picPath=Server.MapPath("~/upload");
            doUpload();
        }
    }protectedvoiddoUpload()
    {try{
            HttpPostedFile file=file1.PostedFile;stringstrNewPath=GetSaveFilePath()+GetExtension(file.FileName);
            file.SaveAs(picPath+strNewPath);stringurlPath=picServer+strNewPath;
            urlPath=urlPath.Replace("\\","/");
            WriteJs("parent.uploadsuccess('"+urlPath+"');");
            
        }catch(Exception ex)
        {
            WriteJs("parent.uploaderror();");            
        }
    }

WriteJs方法为：

protectedvoidWriteJs(stringjsContent)
    {this.Page.RegisterStartupScript("writejs","<script type='text/javascript'>"+jsContent+"</script>");
    }

好了！至此，整个例子就都完成了。

可能逻辑上讲得不是很好，请大家多多谅解啊！