|
本文所讲是在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] 下一页
|