html中upload控件的模拟上传

最新推荐文章于 2023-12-15 11:43:44 发布

weixin_30375247

最新推荐文章于 2023-12-15 11:43:44 发布

阅读量438

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Jackie-sky/archive/2013/02/06/2908042.html

版权

说起上传就不得不谈到文件上传控件:

然而这个上传控件是一个文本框和一个按钮，这个按钮的样式和目前所做的项目中的风格基本是不一致的。于是想打算用一个文本框和一个图片按钮来模仿上传功能。

在上网查找相关资料，得到下面一些信息：

我们知道，大部分控件都有一个单击(Click)事件句柄，上传框在点击”浏览”文件对话框，如果我们自己模拟一个上传框,和一个按钮，在单击自定义按钮时候同事触发上传框的Click事件让它弹出文件对话框：

<input type=”text” id=”f_file”/>
<img src=”” onClick=”t_file.Click()”>
<input type=”file” name=”upload” id=”t_file” οnchange=”f_file.value=this.value” style=”display:none;”/>在点击上传按钮时候执行 t_file.Click()当上传框的值有所改变时候通过onchange事件执行f_file.value=this.value，即保持真正的上传框和模拟的上传框的值同步更新，style=”display:none”,让真正的上传框隐藏，使模拟的文件上传框能以假乱真。

然而当该代码放在表单中时候，点击提交表单时候，真正的上传框的内容被清空了。意思就是说，这样模拟出来的上传框没有任何意义的。因为没有办法上传文件。之所以是这样的结果，估计是因为微软处于安全方面的考虑。只有当鼠标真正上传在上传控件的按钮上浏览到的文件才可以看到（否则你进入我的页面，我就可以随心所欲的得到你的私密文件）.

经过认真的查找和求教，最后寻得一妙方，将upload控件放在a标签中，同过css样式将upload的透明度设置为0，继而实现了理想中的效果。html源码如下：

<html>
<head>
<title>test</title>
<style>
a.files {
width:90px;
height:30px;
overflow:hidden;
display:block;
border:1px solid #BEBEBE;
background:url(img/fu_btn.gif) left top no-repeat;
text-decoration:none;
}
a.files:hover {
background-color:#FFFFEE;
background-position:0 -30px;
}
/*file设为透明，并覆盖整个触发面*/
a.files input {
margin-left:-350px;
font-size:30px;
cursor:pointer;
filter:alpha(opacity=0);
opacity:0;
}
/*取消点击时的虚线框*/
a.files, a.files input {
outline:none;/*ff*/
hide-focus:expression(this.hideFocus=true);/*ie*/
}
</style>
<script type="text/javascript">
window.onload= addfile;
function addfile(){
var file = document.createElement("input");
file.name = "filename";
file.type = "file"; 

document.getElementById("idFile").appendChild(file);
}

function hrefclick()
{
return false;
}

</script>
</head>
<body>
<a href="javascript:void(0);" class="files" id="idFile"></a>sa
</body>
</html>

转载于:https://www.cnblogs.com/Jackie-sky/archive/2013/02/06/2908042.html

weixin_30375247

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中upload控件的模拟上传

说起上传就不得不谈到文件上传控件:<inputtype="file"name="t_file">然而这个上传控件是一个文本框和一个按钮，这个按钮的样式和目前所做的项目中的风格基本是不一致的。于是想打算用一个文本框和一个图片按钮来模仿上传功能。在上网查找相关资料，得到下面一些信息：我们知道，大部分控件都有一个单击(Click)事件句柄，上传框在点击”浏览”文件对话框，...
复制链接

扫一扫