柠檬铺

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