可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果:

将它写成一个jQuery插件:

(function($){
$.fn.browseElement = function(){
var input = $("<input type='file' multiple>"); input.css({
"position": "absolute",
"z-index": 2,
"cursor": "pointer",
"-moz-opacity": "0",
"filter": "alpha(opacity: 0)",
"opacity": "0"
}); input.mouseout(function(){
input.detach();
}); $(this).mouseover(function(){
input.css($(this).offset());
input.width($(this).outerWidth());
input.height($(this).outerHeight());
$("body").append(input);
}); return input;
};
})(jQuery);

注意: 使用input.offset($(this).offset),会产生bug,常常出现两倍的左侧距离,还是使用.css方法

然后在页面中自定义一个上传按钮:

#attach {
width:100px;
height:30px;
border:1px solid #00B7FF;
background:#cae2fd;
border-radius:4px;
color:#00B7FF;
font-size:12px;
line-height:30px;
text-align:center;
margin:auto;
padding:0
}
<div id="attach">选择文件</div>

然后对该按钮调用扩展的browseElement方法:

var hiddenInput = $('#attach').browseElement();

hiddenInput.change(function(){
//上传文件时相关处理代码
});

完整代码在:

http://pan.baidu.com/s/1mgwQpew

使用自定义的按钮替换默认的<input type='file'>的更多相关文章

  1. 自定义样式 实现文件控件input[type='file']

    一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...

  2. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  3. input type="file"在各个浏览器下的默认样式,以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

  4. 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. 关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案

    在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click() ...

  6. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  7. input[type='file']默认样式

    <input type="file" name="" id="" value="" /> 当input的ty ...

  8. input type= file 如何更改自定义的样式

    input { @include wh(24px,22px);//sass 宽高 @include pa(0,0); //绝对定位 top:0:left:0: opacity: 0; //透明度: o ...

  9. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

随机推荐

  1. wepy - 与原生有什么不同(slot插槽)

    wepy官方文档是这样介绍的 简单描述就是: index.wpy:子组件 panel.wpy:父组件 1.slot是内容分发的占位符 2.slot父组件在子组件使用时,名称必须一致 3.slot子组件 ...

  2. VScode-Go can't load package: package .: no buildable Go source files in

    在VScode中调试Go程序时提示: can't load package: package .: no buildable Go source files in d:\my_workspace\go ...

  3. asp web api json 序列化后 把私有字段信息也返回了解决办法

    serialization returns private properties Are your types marked as [Serializable]? Serializable means ...

  4. redhat利用yum快速搭建LAMP环境

    LAMP LAMP环境,对于PHP开发及其开源的PHP项目的部署都很关键的. LAMP的含义: L   ---Linux A  ---Apache   web M ---Mysql     datab ...

  5. iOS 音乐播放器之锁屏效果+歌词解析

    概述 功能描述:锁屏歌曲信息.控制台远程控制音乐播放:暂停/播放.上一首/下一首.快进/快退.列表菜单弹框和拖拽控制台的进度条调节进度(结合了QQ音乐和网易云音乐在锁屏状态下的效果).歌词解析并随音乐 ...

  6. (CF#257)B. Jzzhu and Sequences

    Jzzhu has invented a kind of sequences, they meet the following property: You are given x and y, ple ...

  7. ant入门程序

    一. ant简单介绍 Ant是apache的一个核心项目, 它的作用是项目自己主动化构建, 由于它内置了Javac.Java.创建文件夹.拷贝文件等功能, 直接执行build.xml文件就能够编译我们 ...

  8. 戴尔大力宣传Ubuntu 对比与Windows的差异

    2010-06-18 10:58:36   11175 人阅读   作者:萧萧 编辑:萧萧[爆料]  评论(46)   戴尔近日上线了一个新的网页,对比Linux开源系统(主要是Ubuntu)与Win ...

  9. no !/ in spec

    问题: 在学习hibernate的过程中涉及到hibernate.cfg.xml和hibernate.hbm.xml配置文件的编写,写完之后配置文件出现黄色感叹号,鼠标悬停在感叹号上时显示no !/ ...

  10. jsp处理表单上传图片(commons-fileupload-1.2.2.jar,commons-io-2.4.jar)

    upload.jsp <%@ page language="java" import="java.util.*" pageEncoding="U ...