修改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=" ...
随机推荐
- [洛谷P2124] 奶牛美容
洛谷题目链接:奶牛美容 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 6 16 ................ ..XXXX....XXX... ...XXXX... ...
- js错误处理
导致程序无法继续执行的异常状态称为错误. js中一旦发生错误,就会自动创建一个Error类型对象 js中有6中错误类型: SyntaxError 语法错误 ReferenceError 引用错误,找不 ...
- 【洛谷 P2464】[SDOI2008]郁闷的小J(线段树)
题目链接 这题我很久之前用分块写过,没写出来.. 今天又看到了,于是下决心把这题做出来. 这次我用线段树写的,直接对每本书的编号Hash一下然后离散化然后各建一棵线段树,维护当前编号在某个位置有没有书 ...
- H5智能表单
表单 keygen元素的作用是提供一种验证用户的可靠方法 datalist 元素规定输入域的选项列表 output元素用于不同类型的输出,比如计算或脚本输出 智能表单 input 新增type值 em ...
- struts标签include传参的问题
传一个常量过去居然为null, <s:include value="/biz/customer/corp/module/franchisemanageright/corpFranchi ...
- 区块链开发(五)git、truffle安装
truffle是以太坊最受欢迎的一个开发框架,本篇博客介绍truffle的下载安装过程. git安装 在安装truffle之前需要核实一下本机是否安装git程序.后面的程序安装需要依赖git. 输入以 ...
- docker从零开始网络(七) 配置daemon和容器
启用IPv6支持 在Docker容器或swarm服务中使用IPv6之前,需要在Docker守护程序中启用IPv6支持.之后,您可以选择将IPv4或IPv6(或两者)与任何容器,服务或网络一起使用. 注 ...
- 使用rosbag记录openni2_launch消息
首先看教程 http://wiki.ros.org/openni_launch/Tutorials/BagRecordingPlayback http://wiki.ros.org/Bags http ...
- ajaxfileupload异步上传文件
ajaxfileupload插件可以以异步方式上传文件(其实现:iframe),不像传统那样需要刷新,下面就介绍下其使用 1.HTML部分(先引入jquery): <!DOCTYPE html& ...
- java反射(基本知识)
在java中反射降低了模块间的依赖性这个过程称解耦---高内聚,低耦合 在java中,万物皆对象,则将字节码看成一个对象,将一个方法看成一个对象..... 反射--剖析类,分析类的字节码,产生对象的字 ...