首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>NET专区>ASP.NET>asp.net无刷新上传文件
asp.net无刷新上传文件
来源: 发布时间:2008-06-30 发布人: 浏览: 人次   字体: [ ]  

如上所示,首先选择准备上传的文件,然后当你点击上传按钮(name为uploadButton)时,调用uploadImage函数,该函数的作用是复制form1的input type=file的imageFile元素到uploadForm中,并替换原始的imageFile的outerhtml(原因是javascript不支持修改input type=file的元素的value属性),当然还有显示可爱的上传进度条(这样显得我们既专业又酷)。

 function uploadImage() {
        var file = document.getElementById("imageFile");
        var uploadFormElement = document.getElementById("uploadForm");

        //显示进度条
        document.getElementById("processDiv").style.display = "block"; // the progress div

        //复制图片数据
        uploadFormElement.removeChild(uploadFormElement.imageFile);
        uploadFormElement.appendChild(file);
        document.getElementById("uploadImageDiv").innerHTML = '<input type="file" id="imageFile" name="imageFile" />';

        //提交图片数据
        uploadFormElement.submit();
    }
当用户点击上传按钮时,工作转由UploadImage.aspx程序接手。
  protected void Page_Load(object sender, EventArgs e)
        {
            Page.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            int status = 0;//状态
            string message = "";//反馈信息

            //检查文件
            if (Request.Files.Count == 0)
            {
                status = 1;
                message = "请先选择要上传的文件";
                RenderUploadScript(status, message);
            }
            string ext = Path.GetExtension(Request.Files[0].FileName).ToLower();
            if (ext != ".jpg" && ext != ".jpeg")
            {
                status = 2;
                message = "抱歉,目前仅支持jpg格式的图片";
                RenderUploadScript(status, message);
            }
                Guid fileID = Guid.NewGuid();
                string fileName = Server.MapPath(String.Format("~\\Files\\{0}.jpg",fileID));
                Request.Files[0].SaveAs(fileName);
                 //记录到当前页面

            RenderUploadScript(0,String.Format( "File.aspx?key={0}",fileID));
        }

        private void RenderUploadScript(int status, string mess)
        {
            string script = string.Format("<script language='javascript'> window.parent.uploadImageResponse(\"{{ status:{0},message:'{1}'}}\"); </script>", status, mess);
            Response.Write(script);
            Response.End();
        }

通过HttpWebRequest对象,我们能够获得任何由客户端post或get到服务器端的数据,UploadImage.aspx页面的工作很简单,只负责接收post过来的文件,并保存到指定的位置(方便演示,我仅仅使用了SaveAs)。
另外,要注意到一点,由于是Ajax模式的文件上传,意味着你的程序要通过javascript反馈系统出现的问题,这里我通过一个名称为status的参数来返回出现的问题,0则为一切正常,1则为用户没有提供文件,2则为用户没有上传我指定的文件类型。
当用户上传的文件没有任何问题的时候,系统保存文件并返回状态0,并附加文件的显示路径,其他状态附属的信息则是错误信息。
现在回到Default.aspx来看如何接收UploadImage.aspx反馈回来的信息,这里要考虑到UploadImage.aspx是个页面,而且隶属与iframe元素uploadResponse,所以我们通过javascipt来访问uploadResponse的所属window的对象或函数的写法如下:
"<script language='javascript'> window.parent.uploadImageResponse(\"{{ status:0,message:'File.aspx?key=guid'}}\");<script>"
Default的接应脚本则如下:
  function uploadImageResponse(response) {
        document.getElementById("processDiv").style.display = "none"; // hide progresss div
        var errLabel = document.getElementById("uploadMessage");
        errLabel.innerHTML = "";
        window.eval("var k=" + response);
        if (k.status == 1)
            errLabel.innerHTML = k.message;
        else if (k.status == 2)
            errLabel.innerHTML = k.message;
        else
            eval("tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'img', { src:'" + k.message + "',style:'border:0px;'}, null);");
    }

仅仅是在对应的htm编辑器的内容中插入message附带的信息。

ok!!主要的难点我们都解决了。


共3页: 上一页 [1] 2 [3] 下一页
相 关 文 章   发布商链接
·asp.net在上传图片上加入自己的背景...
·ASP.NET实现XmlHttp跨域访问实例代码
·如果在asp.net中将CSS的样式表文件动...
·实例讲解asp.net防止按钮多次提交问...
·防止ASP.net页面突然被关闭后资源未...
·举例详解C#代码与javaScript函数和变...
·ASP.net实现的IP访问限制详细代码,...
·asp.net实现的下拉框二级联动的功能...
·实例讲解无刷新仿google波形扭曲彩色...
·asp.net利用全局异常处理记录异常信...
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·如何实现在DataList控件中的D...
·实例讲解asp.net生成高质量缩
·asp.net适用于IE或FireFox的...
·举例详解C#代码与javaScript...
·在Ie中保存图片时出现"800700...
·asp.net文件上传大小限制的控
·asp.net动态生成txt文本文件...
·asp.net实现将Excel文件导入...
·实现多列,带图片的DropDownLi...
·javascript实现TreeView 控件
·ASP.NET配置Word的操作权限
·让FileUpload控件在IE和FireF...
·ASP.NET实现Office文档的分类
·asp.net文件下载显示进度条的
·实例讲解ASP.NET上传大文件的
热 门 文 章
·asp.net(C#)上传下载及文件管...
·图解asp.net如何用excel做报...
·Asp.Net防止刷新重复提交数据...
·asp.net实现将Excel文件导入...
·asp.net中Web.Config配置文件...
·ASP.NET取得物理路径和虚拟路...
·asp.net(c#)生成验证码代码,...
·asp.net页面回传与js调用服务...
·asp.net(C#版)实现登录验证码...
·DataGrid中DropDownList触发S...
·ASP.net 实现批量数据更新或...
·asp.net中DataBinder.Eval的...
·asp.net可输入的下拉框复合控...
·asp.net中常见的几种日历控件...
·示例小解LinkButton组件中的C...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .