原生的文件上传框<input type="" />的效果不是很好看,
很多时候,需要改变样式,让它符合客户的要求。比如浏览按钮换成自定义的图片。
网上有一种错误的做法是,把文件上传框设置为隐藏,然后自定义一个文本框和一个按钮,点击按钮时用
js代码调用文件框的click事件弹出选择文件的效果。
这样做纯粹只能看看效果而已,因为浏览器考虑到所谓的安全因素,文件框只能是用户选择用鼠标点击,选择文件后
才能提交到服务器,否则提交表单时,浏览器会把文件框清空。
(经测试,用js获得对象,再住对象内添加html代码的方式也不能够正常上传)
不过有个高手想出了一个替代方案
就是把文件框设置为透明,并让其定位在一张定义好的图片按钮上,这种方案确实可行。
但是这种方案也有些限制,即按钮图片必须要根文件框的浏览按钮差不多的宽高。为什么了?
这是因为控制文件框宽高的样式不怎么好用,可能各个浏览器有各自的hack写法(没具体研究过)。
在这种可行方案的基础上,我做了如下改进,改进后对按钮图片基本无限制
先讲下思路:让文件框在按钮上随鼠标移动而移动,以保证无论用户点击按钮的哪个部位都能弹出文件选择框
。
具体代码如下
/**
* 给文件框绑定到自定义按钮上
* customerBtnId :自定义按钮的ID
* fileInputId:文件件框ID
* textInputId:文本框ID,文件框的value值在这个文本框中显示
*/
function bindFileInput(customerBtnId,fileInputId,textInputId){
//添加事件监听函数
var addListener=function(element,eventName,funName){
if(window.addEventListener){
element.addEventListener(eventName,funName,false);
}else if(window.attachEvent){
element.attachEvent('on'+eventName,funName);
}else{
element['on'+eventName]=funName;
}
}
var render=function(){
var fileInput=document.getElementById(fileInputId),
customerBtn=document.getElementById(customerBtnId);
fileInput.style.cssText="filter:alpha(opacity=0);opacity:0;"+
"position:absolute;display:none;cursor:pointer;z-index:10;";
fileInput.size=1;
//当用户选择文件后,把文件框的value值显示到指定的文本框中
addListener(fileInput,'change',function(){
document.getElementById(textInputId).value=fileInput.value;
});
//当鼠标移上自定义按钮时,显示文件框
addListener(customerBtn,'mouseover',function(){
fileInput.style.display='block';
});
//当鼠标在按钮上移动时,让文件框跟随鼠标移动
addListener(customerBtn,'mousemove',function(event){
event=event||window.event;
fileInput.style.left=event.clientX-50+'px';
fileInput.style.top=event.clientY-10+'px';
});
//当鼠标离开文件框时,让文件框隐藏
addListener(fileInput,'mouseout',function(){
fileInput.style.display='none';
});
}
addListener(window,'load',render);
}
示例代码
<script type="text/javascript">
bindFileInput('browserBtn','file','filename');
</script>
<input type=file name="file" id="file" />
<input type="text" id="filename" />
<input type="button" value="浏览..." class="submit" id="browserBtn" />
分享到:
相关推荐
百度Popup.js弹出框可拖拽小框架进化版,兼容IE678,Firefox,Chrome.zip
随缘asp企业网站管理系统(兼容IE及firefox) 后台可以用以下地址: http://您的网址/manage/login.asp 默认登录用户:admin 默认登录密码:admin 一、全站采用主流DIV+CSS框架布局,DIV+CSS的优势何在? 1、符合W3C...
支持ie8单选框与复选框自定义样式
自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览
ListViewRadioBtnDemo自定义单选框样式
NULL 博文链接:https://wjason.iteye.com/blog/344811
自定义弹出框样式 alert修改 根据需要修改弹出框样式
Android自定义搜索框的代码例子。用于演示自定义搜索框的功能,搜索框的实现方式有三种:1、利用Actionbar的SearchView控件;2、利用AutoCompleteTextView控件进行扩展;3、基于EditText+ListView实现自定义搜索框。
jquery网页自定义提示框,可以自己设置时间,显示内容!兼容IE6、7、8以及所有的主流浏览器
完整版自定义信息框模块.rar
IOS 自定义搜索框~,简单好用
易语言自定义信息框按钮标题源码,自定义信息框按钮标题,HookProc,MessageBox,SetDlgItemText,SetWindowsHookEx,UnhookWindowsHookEx,GetWindowLong
设置IE的各种自定义功能。MFC的界面,IE自定级别,安全级别,信任站点,收藏栏,等各种设置。代码编译通过,功能完善。是研究IE相关设置的最好辅助源代码。
代码说明:WPF 去边框 自定义窗体 拖动窗体大小变化 兼容winfrom控件 缺陷缺陷: 不规则窗体不可用,只能用于矩形窗体
Js 自定义提示框,几乎没有图片,帅气的提示风格,提示,警示,确认三种提示框
有时候感觉系统自带的提示框太丑了,试试自定义提示框吧,直接引用js即可
易语言源码自定义信息框按钮标题.rar 易语言源码自定义信息框按钮标题.rar 易语言源码自定义信息框按钮标题.rar 易语言源码自定义信息框按钮标题.rar 易语言源码自定义信息框按钮标题.rar 易语言源码自定义信息...
自定义搜索框控件,对热词进行提示,以及搜索文字的自动补全
自定义提示框