<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 标签默认样式的简单方法的更多相关文章

  1. 改变input[type=file]的默认样式

    自定义上传按钮样式的终极解决方案--input透明法 <style> .div1{ float: left; height: 41px; background: #f5696c; widt ...

  2. <input type='file'/>把默认样式改成框框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 去掉input type=file的默认样式

    原样式: 解决: 加style="opacity: 0;"变成透明的 然后可以外面套个div,在div上自定义样式.

  4. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  5. input type=file 标签禁止让用户手动输入

    常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...

  6. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  7. 改变input type="file" 文字、样式等

    <div class="tac"> <input type="file" id="browsefile" class=&q ...

  8. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  9. <input type="file"> 标签详解

    详见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#attr-multiple 使用 type=" ...

随机推荐

  1. 【数据结构】bzoj2957楼房重建

    Description 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些 ...

  2. 动态规划：LCIS

    先给出状态转移方程: 定义状态 F[i][j]表示以a串的前i个整数与b串的前j个整数且以b[j]为结尾构成的LCIS的长度 状态转移方程: ①F[i][j] = F[i-][j] (a[i] != ...

  3. CVE-2016-6662 mysql RCE测试

    参考:http://bobao.360.cn/learning/detail/3027.html ,我尝试第一种方法 1.先修改mysql_hookandroot_lib.c里面的反弹地址和端口: # ...

  4. mac废纸篓清空的心得、mac设置不睡眠不待机不锁屏、如何快速锁屏待机睡眠、mac重启、mac学习的必备软件－城

    mac废纸篓清空: 1.使用废纸篓的清空废纸篓,清空所有包括被锁定的文件: 2.使用“磁盘工具”的“修复磁盘权限”,修复完成再操作清空废纸篓: 3.使用cleanmymac软件“垃圾清理”和“擦除器” ...

  5. python模块之copy

    提供浅拷贝和深拷贝两种模式. =>copy(x):返回x的浅拷贝 =>deepcopy(x):返回x的深拷贝 浅拷贝和深拷贝: 浅拷贝复制不变对象,引用可变对象(如列表和字典): 深拷贝复 ...

  6. vue + vue-router + vue-resource 基于vue-cli脚手架 --->笔记

    ps: 基于Vue2.0 npm的vue-cli脚手架 在vue-router中路由路径的简写代码: 点击打开项目 > build > webpack.base.conf.js 找到web ...

  7. brew安装mysql

    1. 安装mysql5.7版本,不指定版本就默认安装最新的,目前最新是8 brew install mysql@5.7 2. 安装完进入/usr/local/Cellar/mysql@5.7目录,可以 ...

  8. eclipse 关键字高亮显示

    关键字高亮显示(变量.函数名……) Toggle Mark Occurrences  (Alt + Shift + O), 也可以在eclipse主界面的快捷工具栏:按下那个小黄蜡笔图标,来设置高亮显 ...

  9. [BZOJ1853][Scoi2010]幸运数字 容斥+搜索剪枝

    1853: [Scoi2010]幸运数字 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 3202  Solved: 1198[Submit][Status ...

  10. kotlin 写的一个简单 sql 查询解析器

    package com.dx.efuwu.core import org.apache.commons.lang.StringUtils import java.sql.PreparedStateme ...