javascript摘要——为file标签的name属性赋值

最新推荐文章于 2022-07-27 23:17:23 发布

风尘浪子

最新推荐文章于 2022-07-27 23:17:23 发布

阅读量2.4k

点赞数

分类专栏： Javascript摘要文章标签： file javascript input button server html

本文链接：https://blog.csdn.net/Leslies2/article/details/6669655

版权

Javascript摘要专栏收录该内容

1 篇文章 0 订阅

订阅专栏

已经很久没用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标签之上。
 
    01<html xmlns="http://www.w3.org/1999/xhtml">
 
    02<head runat="server">
 
    03    <title></title>
 
    04    <script type="text/javascript">
 
    05        window.onload =function () {
 
    06            //为text标签赋值显示已经有的文件路径
 
    07            document.getElementById("text1").value ="F://My Documents/File.txt";
 
    08        }
 
    09 
 
    10        functionbtn1_onclick() {
 
    11            varfile = document.getElementById('file1')
 
    12            file.click();
 
    13            document.getElementById("text1").value = file.value;//显示新文件路径
 
    14             .......
 
    15        }
 
    16    </script>
 
    17</head>
 
    18<body>
 
    19    <form id="form1"runat="server">
 
    20    <div>
 
    21        <input type="text"id="text1" />
 
    22        <input type="button"id="btn1" onclick="btn1_onclick()"  style="width:60px"value="浏览" />
 
    23        <input type="file"id="file1" style="visibility:hidden;"  />
 
    24    </div>
 
    25    </form>
 
    26</body>
 
    27</html>
 
但要注意的一点是，使用以上方法，只适用于为file标签的name属性赋值，但无法直接获取file的上传文件。这是因为安全性的原因，浏览器会阻止直接通过程序对file标签绑定上传文件。如果想通过“隐藏标签”的方式直接上传文件，那还得花一点小工夫。首先建立一个file标签，然后加入一个text标签把file的文本部分覆盖，最后在file的onchange事件中为text标签赋值。
 
 01<html xmlns="http://www.w3.org/1999/xhtml">
 
 02<head runat="server">
 
 03    <title></title>
 
 04    <script type="text/javascript">
 
 05        window.onload =function () {
 
 06            //为text赋值显示已经有的文件路径
 
 07            document.getElementById("text1").value ="F://My Documents/File.txt";
 
 08        }
 
 09 
 
 10        //在file赋值时，让text标签同步更新
 
 11        functionfile1_onchange() {
 
 12            document.getElementById("text1").value = document.getElementById("file1").value;
 
 13        }
 
 14    </script>
 
 15 
 
 16    <script type="text/C#"runat="server">
 
 17        //获取上传文件
 
 18        protected void Page_Load(object sender, EventArgs e)
 
 19        {
 
 20           if(HttpContext.Current.Request.Files.Count != 0)
 
 21           {
 
 22              HttpPostedFile file = HttpContext.Current.Request.Files[0];
 
 23              string fileName = file.FileName;
 
 24              System.IO.Stream stream=file.InputStream;
 
 25              byte[] byteData =new byte[stream.Length];
 
 26              int length = stream.Read(byteData, 0, (int)stream.Length);
 
 27              string data = System.Text.Encoding.Default.GetString(byteData);     
 
 28              ...........
 
 29           }
 
 30        }
 
 31    </script>
 
 32</head>
 
 33<body>
 
 34    <form id="form1"method="post" enctype="multipart/form-data" action="Default.aspx">
 
 35    <div style="position:relative;height:24px;">
 
 36          <!--设置style属性，使text标签把file标签的文本部分覆盖-->
 
 37         <div style="position:absolute;left:0;top:2px;">
 
 38              <input type="text"id="text1"/>
 
 39         </div>
 
 40         <input type="file"id="file1" name="file1"  onchange="file1_onchange()"/>
 
 41         <input type="submit"/>
 
 42    </div>
 
 43    </form>
 
 44</body>
 
45</html>