天天看點

javascript摘要——為file标簽的name屬性指派

已經很久沒用javascript做頁面了,這天突然有朋友問我關于FileUpload的指派問題,由于FileUpload經過編譯後,最後生 成<input type="file"/>标簽。而在 HTML 文檔中 ,<input type="file"/> 标簽是浏覽器向伺服器發送選中檔案的。該元素有一個 value 屬性,儲存了使用者指定的檔案的名稱,為安全起見,file标簽的value 屬性是隻讀的,不允許程式員修改它的值,并且HTML value 屬性也會被忽略。是以,當資料庫記錄下檔案在用戶端的位址,需要為file标簽的value屬性指派時,就會出現問題。

經過多翻查詢,最後在下決定使用“隐藏标簽”的方法來實作這些功能。首先在頁面添加一個text标簽,一個button标簽,一個file标簽,并 把file标簽的sytle屬性設定為“visibility:hidden;”  把text标簽和button标簽模拟file的外觀。在window. 标簽的onclick方法中引發file标簽的click事件,擷取上傳檔案,最後把上傳檔案的路徑顯示在text标簽之上。

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 

    <title></title> 

    <script type="text/javascript"> 

        window.onload = function () { 

            //為text标簽指派顯示已經有的檔案路徑 

            document.getElementById("text1").value = "F://My Documents/File.txt"; 

        } 

        function btn1_onclick() { 

            var file = document.getElementById('file1') 

            file.click(); 

            document.getElementById("text1").value = file.value;//顯示新檔案路徑 

             ....... 

    </script> 

</head> 

<body> 

    <form id="form1" runat="server"> 

    <div> 

        <input type="text" id="text1" /> 

        <input type="button" id="btn1" onclick="btn1_onclick()" style="width:60px" value="浏覽" /> 

        <input type="file" id="file1" style="visibility:hidden;"  /> 

    </div> 

    </form> 

</body> 

</html> 

但要注意的一點是,使用以上方法,隻适用于為file标簽的name屬性指派,但無法直接擷取file的上傳檔案。這是因為安全性的原因,浏覽器會 阻止直接通過程式對file标簽綁定上傳檔案。如果想通過“隐藏标簽”的方式直接上傳檔案,那還得花一點小工夫。首先建立一個file标簽,然後加入一個 text标簽把file的文本部分覆寫,最後在file的onchange事件中為text标簽指派。

            //為text指派顯示已經有的檔案路徑 

        //在file指派時,讓text标簽同步更新 

        function file1_onchange() { 

            document.getElementById("text1").value = document.getElementById("file1").value; 

    <script type="text/C#" runat="server"> 

        //擷取上傳檔案 

        protected void Page_Load(object sender, EventArgs e) 

        { 

           if (HttpContext.Current.Request.Files.Count != 0) 

           { 

              HttpPostedFile file = HttpContext.Current.Request.Files[0]; 

              string filefileName = file.FileName; 

              System.IO.Stream stream=file.InputStream; 

              byte[] byteData = new byte[stream.Length]; 

              int length = stream.Read(byteData, 0, (int)stream.Length); 

              string data = System.Text.Encoding.Default.GetString(byteData);       

              ........... 

           } 

    <form id="form1" method="post" enctype="multipart/form-data" action="Default.aspx"> 

    <div style="position:relative;height:24px;"> 

          <!--設定style屬性,使text标簽把file标簽的文本部分覆寫--> 

         <div style="position:absolute;left:0;top:2px;"> 

              <input type="text" id="text1"/> 

         </div> 

         <input type="file" id="file1" name="file1" onchange="file1_onchange()"/> 

         <input type="submit" /> 

本文轉自 leslies2  51CTO部落格,原文連結:http://blog.51cto.com/79100812/633916

繼續閱讀