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

本文所讲是在asp.net无刷新上传文件,在这里,不要认为一提到Ajax就是讲XHttpRequest, Ajax还要包括基于frame的操作,对!我说的是古老的frame。
xhttpRequest并不能实现文件上传,所以涉及到文件的上传,我们还得回到frame上,尤其是iframe。

需要的材料:
1,你掌握基本的Javascript技能。
2,一个隐藏的form和iframe,这里我分别命名为uploadForm和uploadResponse.
3,一个负责接收文件的页面,名字叫做UploadImage.aspx。
4,一个负责显示文件的页面,名字叫做File.aspx。

基本原理:
通过复制当前form(form1)中的input type=file 的html元素到另一个专用于文件上传的form(uploadForm)中,而切uploadForm的target指向到一个隐藏的iframe(uploadResponse)框架的name.这样,当执行uploadForm的submit()操作时,就会通过uploadResponse将uploadForm的内容post到UploadImage.aspx页面去执行,由于iframe元素uploadResponse及form元素uploadForm元素都是位于一个隐藏的div元素中,所以访问者自始至终都不会见到多余的东西。

实例:
Default.aspx页面。
<script type="text/javascript">

    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();
    }

    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);");
    }

    function uploadButton_onclick() {
    }
    </script>

    <form id="form1" runat="server">
    <div>
        <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
        <tinymce:TextArea ID="elm1" theme="advanced" plugins="spellchecker,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template"
            theme_advanced_buttons1="bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,forecolor,backcolor,image"
            theme_advanced_buttons2="" theme_advanced_buttons3="" theme_advanced_buttons4=""
            theme_advanced_toolbar_location="top" theme_advanced_toolbar_align="left" theme_advanced_path_location="bottom"
            theme_advanced_resizing="true" runat="server" />
        <div style="margin-top: 5px">
            上传图片:
            <br />
            <div id="uploadImageDiv">
                <input type="file" id="imageFile" name="imageFile" /></div>
            <input type="button" id="uploadButton" onclick="uploadImage();" value="上传" />
            <span id="uploadMessage" style="border: 1px solid #cccccc; color: Red;"></span>
        </div>
        <div id="processDiv" style="display: none; color: #660066; font-family: Arial;">
            <img src="/images/loading2.gif" alt="uploading" />
            图片上传中 <span id="fileName" />
        </div>
    </div>
    </form>
    <div style="display: none;">
        <iframe name="uploadResponse"></iframe>
        <form id="uploadForm" action="UploadImage.aspx?t=<%= DateTime.Now.Ticks %>" target="uploadResponse"
        method="post" enctype="multipart/form-data">
        <input type="file" name="imageFile" value="" />
        </form>
    </div>


共3页: 上一页 1 [2] [3] 下一页
↓下一篇:没有了
相 关 文 章   发布商链接
·基于.Net平台应用程序唯一运行实例...
·ASP.net中上传文件的操作
·使用DataGrid显示来自于数据库的图象
·DataGrid使用心得总结(附大量代码)
·ViewState的工作原理及其示例小解
·asp.net2.0中新增的特殊符号"~"的使...
·让.Net程序脱离.net framework框架运...
·asp.net跳转页面的三种方法比较
·ASP.NET AJAX解决网页打开等待问题...
·ASP.NET中不定级动态菜单的实现祥解
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·在Ie中保存图片时出现"800700...
·asp.net文件上传大小限制的控
·asp.net动态生成txt文本文件...
·asp.net动态生成txt文本文件...
·asp.net实现将Excel文件导入...
·实现多列,带图片的DropDownLi...
·javascript实现TreeView 控件
·ASP.NET配置Word的操作权限
·让FileUpload控件在IE和FireF...
·ASP.NET实现Office文档的分类
·asp.net文件下载显示进度条的
·实例讲解ASP.NET上传大文件的
·如何防止asp.net盗链下载问题
·分析asp.net页面后台执行的流
·asp.net实现的截取字符串函数...
热 门 文 章
·asp.net(C#)上传下载及文件管...
·Asp.Net防止刷新重复提交数据...
·asp.net中Web.Config配置文件...
·图解asp.net如何用excel做报...
·asp.net页面回传与js调用服务...
·asp.net(C#版)实现登录验证码...
·ASP.NET取得物理路径和虚拟路...
·asp.net(c#)生成验证码代码,...
·ASP.net 实现批量数据更新或...
·DataGrid中DropDownList触发S...
·.net中C#代码与javaScript函...
·asp.net中常见的几种日历控件...
·ViewState的工作原理及其示例...
·asp.net可输入的下拉框复合控...
·asp.net实现MSN弹出窗口特效...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .