.net ajax式上传文件

      今天在这里介绍一下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"));
        });
         
         var hideDiv = function(idName){
             $("#"+idName).fadeOut("fast");
         };
         
         //载入中的GIF动画
        var loadingUrl = "images/ajax-loader.gif";
        
        //选择文件后的事件,iframe里面调用的
        var uploading = function(imgsrc){
            var el = $("#uploading");
            $("#ifUpload").fadeOut("fast");
            el.fadeIn("fast");
            el.html("<img src='"+loadingUrl+"' align='absmiddle' /> 上传中");
            return el;
        };
        
        //重新上传方法    
        var uploadinit = function(){
            $("#uploading").fadeOut("fast",function(){
                 $("#ifUpload").fadeIn("fast");
            });
                   
        };
        
        //上传时程序发生错误时，给提示，并返回上传状态
        var uploaderror = function(){
            alert("程序异常，上传未成功。");
            uploadinit();
        };
        
        //上传成功后的处理
        var uploadsuccess = function(newpath){
            $("#txtContent").append("<img src=\""+newpath+"\" onload=\"if(this.width>300){this.width=300;}\" />");
              var el = $("#uploading");
            el.html("上传成功,<a href=\"javascript:void(0);\" onclick=\"uploadinit();\">[重新上传]</a>.");
        };
        
        
        //创建一个上传控件
        var uploadcreate = function(el){
            var strContent = "<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">
        
        var uploadSelect = function(el){
            el.fadeOut("show");        
            parent.uploading(document.getElementById("file1").value);
            $("#frmUpload").submit();
        };
         
    </script>

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

 

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

    <form runat="server" id="frmUpload" method="post" enctype="multipart/form-data">
        <input type="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代码，都是些上传文件的代码，我只贴出部分的主要代码。

    string picPath = "";
    string picServer = "upload";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            picPath = Server.MapPath("~/upload");
            doUpload();
        }
    }

    protected void doUpload()
    {
        try
        {
            HttpPostedFile file = file1.PostedFile;
            string strNewPath = GetSaveFilePath() + GetExtension(file.FileName);
            file.SaveAs(picPath+strNewPath);
            string urlPath = picServer + strNewPath;
            urlPath = urlPath.Replace("\\", "/");
            WriteJs("parent.uploadsuccess('" + urlPath + "'); ");
            
        }
        catch (Exception ex)
        {
            WriteJs("parent.uploaderror();");            
        }
    }

WriteJs方法为：

    protected void WriteJs(string jsContent)
    {        
        this.Page.RegisterStartupScript("writejs","<script type='text/javascript'>"+ jsContent+"</script>");
    }

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

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