Asp.net + js 异步上传文件的例子 - 使用iframe实现

[html]view plaincopyprint? 
   
 </pre><pre class="html" name="code"><%@ Page Language="C#" AutoEventWireup="true" Codebehind="FileInput.aspx.cs" Inherits="WebApp.FileInput" %>  
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
     <title>File upload ajax - Demo</title>  
   
     <script type="text/javascript" src="js/jquery.js">js/jquery.js</script>  
   
     <script type="text/javascript">  
     $(function(){  
       
         $("#Button1").click(function(){  
             upload();  
             return false;  
         });  
     });  
       
     function upload()  
     {  
         var of = $("#uploadFile");  
         if(of.val()=="") {  
             alert("Input file for upload!");  
             return;  
         }  
           
         // 添加到表格  
         var tr = $("#fileInfo tr:eq(0)").clone().get(0);  
         tr.cells[0].innerText = $("#fileInfo tr").length;  
         tr.cells[1].innerText = of.val();  
         tr.cells[2].innerHTML = "<a href='javascript:void(0)' οnclick='return remove()'>Delete</a>";   
         $(tr).appendTo("#fileInfo");  
           
         $("#fileContent").empty();  
         $("#fileContent").append(of);  
         $("#filePanel").append(of.clone());  
           
         //修改属性  
         of.attr('id','');  
         of.attr('name','uploadFile');  
   
         $('#uploadForm').submit();  
     }  
       
     function remove()  
     {  
         if(!confirm("Delete now?"))  
         {  
             return false;  
         }  
           
         // 此处做服务器端删除/ajax  
           
         // 界面用JS删除  
         var elm = event.srcElement || event.target;  
         $(elm.parentNode.parentNode).remove();  
           
         return false;  
     }  
     </script>  
   
 </head>  
 <body>  
     <iframe name="hiddenIframe" frameborder="0" border="0" style="display: none; width: 0px;  
         height: 0px;"></iframe>  
     <form id="uploadForm" action="FileInput.aspx" method="post" enctype="multipart/form-data"  
         target="hiddenIframe" style="display: none; width: 0px; height: 0px;">  
         <span id="fileContent"></span>  
     </form>  
     <form id="form1" runat="server">  
         <div>  
             <asp:Label ID="Label1" runat="server" Text="Input File:"></asp:Label>  
             <span id="filePanel">  
                 <asp:FileUpload ID="uploadFile" runat="server" /></span>  
             <asp:Button ID="Button1" runat="server" Text="Upload File" />  
             <br />  
             <br />  
             <table id="fileInfo" style="border: 1px solid black; width: 400px;">  
                 <tr>  
                     <td>  
                         Row No.  
                     </td>  
                     <td>  
                         File Info……</td>  
                     <td>  
                         Operate</td>  
                 </tr>  
             </table>  
         </div>  
     </form>  
 </body>  
 </html>  

[csharp]view plaincopyprint? 
   
 using System;  
 using System.Data;  
 using System.Configuration;  
 using System.Collections;  
 using System.Web;  
 using System.Web.Security;  
 using System.Web.UI;  
 using System.Web.UI.WebControls;  
 using System.Web.UI.WebControls.WebParts;  
 using System.Web.UI.HtmlControls;  
   
 namespace WebApp  
 {  
     public partial class FileInput : System.Web.UI.Page  
     {  
         protected void Page_Load(object sender, EventArgs e)  
         {  
             if (Request.Files.Count > 0)  
             {  
                 HttpPostedFile file = Request.Files["uploadFile"];  
                 if (null==file)  
                 {  
                     return;  
                 }  
   
                 //Random rand = new Random();  
                 string filename = /*DateTime.Now.Ticks.ToString() + rand.Next() + */System.IO.Path.GetFileName(file.FileName);  
                 string fullFilename = Request.MapPath("~/Files/") + filename;  
   
                 file.SaveAs(fullFilename);  
             }  
         }  
     }  
 }  