javascript摘要——為file標籤的name屬性賦值

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

已經很久沒用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.onload事件中，把已有的檔案路徑顯示在text標籤上。然後在button標籤的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標籤賦值。

<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";        }        //在file賦值時，讓text標籤同步更新        function file1_onchange() {            document.getElementById("text1").value = document.getElementById("file1").value;        }    </script>    <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 fileName = 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);                    ...........           }        }    </script></head><body>    <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" />    </div>    </form></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More