修改file按钮的默认样式实现代码


Posted in Javascript onApril 23, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
<head> 
<title>添加附件</title> 
</head> 
<script type="text/javascript" src="jquery-1.8.0.js"></script> 
<script type="text/javascript"> 
function fclick(obj){ 
style.posTop=event.srcElement.offsetTop 
style.posLeft=event.x-offsetWidth/2 
} 
$(function(){ 
$("#addFile").click(function(){ 
var br = $("<br>"); 
var input1 = $("<input id='inputrecievedocument' type='text'/>"); 
var input2 = $("<input type='button' style='margin-left:5px;background-color:blue' id='btnrecievedocument' onmouseover='fclick(t_file)' value='浏览'/>"); 
var input3 = $("<input name='upfile' type='file' style='position:absolute;filter:alpha(opacity=0);width:70px;' id='t_file' onchange='inputrecievedocument.value=this.value' hidefocus/>"); 
var button = $("<input type='button' value='删除' style='margin-left:5px;background-color:blue'/>"); 
$("#file").append(br).append(input1).append(input3).append(input2).append(button); 
button.click(function() { 
br.remove(); 
input1.remove(); 
input2.remove(); 
input3.remove(); 
button.remove(); 
}); }); 
}); 
</script> 
<body class="body"> 
<form method="post" action="" enctype="multipart/form-data"> 
<input type="button" value="添加附件" class="btn_fujian" id="addFile" style="margin-left:20px;margin-top:2px;"/> 
<div id="file"></div> 
</form> 
</body> 
</html>

IE9中运行如下:
修改file按钮的默认样式实现代码
Javascript 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
vue mounted组件的使用
Jun 18 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
js随机颜色代码的多种实现方式
Apr 23 #Javascript
js对象与打印对象分析比较
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 #Javascript
jquery清空textarea等输入框实现代码
Apr 22 #Javascript
You might like
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP钩子实现方法解析
2019/05/21 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
JS跨域代码片段
2012/08/30 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
浅谈django 重载str 方法
2020/05/19 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
小区门卫岗位职责范本
2014/08/24 职场文书
党员四风剖析材料
2014/08/27 职场文书
公司离职证明样本
2014/09/13 职场文书
2015年计划生育责任书
2015/05/08 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
商业计划书之服装
2019/09/09 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript