.net ajax式上传文件

最新推荐文章于 2021-08-06 03:01:12 发布

weixin_34319817

最新推荐文章于 2021-08-06 03:01:12 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/JackLee_2008/archive/2008/12/15/1355001.html

本文介绍了一种使用jQuery和iframe实现的无刷新文件上传方法。通过iframe提交文件并利用jQuery进行前端交互，实现在页面不刷新的情况下完成文件上传过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

（图1）

下面是上传完的界面：

接下来看一下主要代码：

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

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

Code
<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页面都有哪些东西。

Code
    <script type="text/javascript">

        var uploadSelect = function(el){
            el.fadeOut("show");
            parent.uploading(document.getElementById("file1").value);
            $("#frmUpload").submit();
        };

    </script>

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

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

Code
    <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代码，都是些上传文件的代码，我只贴出部分的主要代码。

Code
    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方法为：

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

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

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

转载于:https://www.cnblogs.com/JackLee_2008/archive/2008/12/15/1355001.html