asp.net无刷新上传文件

本文所讲是在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>
   
    -