• 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.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="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>
    
  • 相关阅读:
    面试笔记之手写单例模式
    Java学习笔记六:Java最基础
    Mac下终端工具iTerm2的快捷键
    Typescript引用类型--字符串
    Typescript引用类型--数组
    Typescript函数作用域
    Typescript的函数定义方式
    初识Typescript以及Typescript的安装
    VS Code前端开发常用插件和常用快捷键
    Vue CLI3项目构建
  • 原文地址:https://www.cnblogs.com/leslies2/p/2126293.html
Copyright © 2020-2023  润新知