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

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

cc-cf

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

阅读量698

点赞数 1

分类专栏： js file 标签

js file 标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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="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标签赋值。