修改input type=file 标签默认样式的简单方法
<html>
<head>
<title></title>
</head>
<body>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" id="uploadFile" style="visibility:hidden;position:absolute;top:0px;width:0px"/><!--隐藏默认标签样式-->
</form>
<input type="button" value="上传" id="btn"/><!--修改为自己喜欢的样式即可,支持图片,对话框,按钮,DIV,注意id要和事件调取的ID一致-->
</body>
<script src="jquery183.min.js"></script>
<script type="text/javascript">
$(function () {
//按钮的点击事件
$('#btn').click(function () {
//触发file的点击事件
$('#uploadFile').click();
});
//file的change事件
$('#uploadFile').change(function () {
//提交form表单的数据
$('#uploadForm').submit();
//清空file标签的value,否则再次提交此文件时,onchange事件就不触发了
$('#uploadFile').val('');
});
});
</script>
</html>
修改input type=file 标签默认样式的简单方法的更多相关文章
- 改变input[type=file]的默认样式
自定义上传按钮样式的终极解决方案--input透明法 <style> .div1{ float: left; height: 41px; background: #f5696c; widt ...
- <input type='file'/>把默认样式改成框框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 去掉input type=file的默认样式
原样式: 解决: 加style="opacity: 0;"变成透明的 然后可以外面套个div,在div上自定义样式.
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- input type=file 标签禁止让用户手动输入
常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...
- angularjs中使用 <input type="file">标签实现一次最多上传5张图片
前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...
- 改变input type="file" 文字、样式等
<div class="tac"> <input type="file" id="browsefile" class=&q ...
- python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题
要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...
- <input type="file"> 标签详解
详见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#attr-multiple 使用 type=" ...
随机推荐
- 【Foreign】魔法 [组合数][质因数分解]
魔法 Time Limit: 10 Sec Memory Limit: 256 MB Description Input Output 仅一行一个整数表示答案. Sample Input 4 10 ...
- [转载]超赞!32款扁平化Photoshop PSD UI工具包(下)
32款扁平化风格的UI工具包第二弹!上篇为大家分享了16款风格各异的UI Kits,下篇继续为大家呈上16款精美的UI工具包,全部都有Photoshop PSD文件可以下载哦,喜欢就赶紧收藏吧! 17 ...
- 关于集合的size的操作
1.创建集合: 创建指定大小的集合:(大小为5) db.createCollection(}) 2.插入五条数据: > db.colle1.insert({name:}) WriteResult ...
- 包与time,datetime,random,sys,shutil 模块
一.包 包是什么? 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 注意: 1. 在python3中,即使包下没有__init__.py文件,import 包仍然不会报错,而在py ...
- Linux中短横线(-)小记
在Linux中短横线(-)可以表示输出流,具体用法如下. 搭配cat cat - 如果指定cat的文件为-,表示从标准输入读取(和直接使用cat,好像没什么区别) 搭配| echo 123 | cat ...
- HDU3664 Permutation Counting
Permutation Counting Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- KVM基本概念
在kvm技术中,应用到的两个东西:qemu和kvm.其中kvm负责cpu虚拟化和内存虚拟化,但是kvm不能模拟其他设备,qemu是模拟IO设备(网卡,磁盘),kvm加上qemu之后就能实现真正意义上的 ...
- 大话Linux内核中锁机制之原子操作、自旋锁【转】
转自:http://blog.sina.com.cn/s/blog_6d7fa49b01014q7p.html 多人会问这样的问题,Linux内核中提供了各式各样的同步锁机制到底有何作用?追根到底其实 ...
- js中给easyui的一列添加按钮
$("#totalTb").datagrid({ columns: [[ { field: 'ENTITY_ACTNAME', title: '活动名 ...
- 阿里云OSS C#回调服务实例代码
先贴出客户端上传文件代码和毁掉函数的定义 需要的引用有:using Aliyun.OSS: 通过nuget包,获取aliyun.oss dll string url = "http:// ...