<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. [51nod1009]数字1的数量

    解题关键:数位dp,对每一位进行考虑,通过过程得出每一位上1出现的次数 1位数的情况: 在解法二中已经分析过,大于等于1的时候,有1个,小于1就没有. 2位数的情况: N=13,个位数出现的1的次数为 ...

  2. svn无法checkout大文件的解决办法

    美术组同事checkout出现,在网络好的情况下,有同事更新下来了,后来在配置文件http.conf的最后加入下面压缩参数才解决问题,配置如下: <IfModule deflate_module ...

  3. float/文档流

    float : left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置. 浮动的定义: 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻 ...

  4. bzoj 1876 高精

    首先我们知道,对于两个数a,b,他们的gcd情况有如下形式的讨论 当a为奇数,b为偶数的时候gcd(a,b)=gcd(a div 2,b) 当b为奇数,a为偶数的时候gcd(a,b)=gcd(a,b ...

  5. How to learn wxPython

    目录 How to learn wxPython Learn Python Choose a good editor Install wxPython Read the wxPython tutori ...

  6. [Leetcode Week5]Word Ladder II

    Word Ladder II 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/word-ladder-ii/description/ Descripti ...

  7. js数组高效去重

    http://blog.csdn.net/chengxuyuan20100425/article/details/8497277 这个方法的思路是先把数组排序,然后比较相邻的两个值. 排序的时候用的J ...

  8. 深入理解Java的注解（Annotation）：基本概念（1）

    zz自:http://www.cnblogs.com/peida/archive/2013/04/23/3036035.html 什么是注解(Annotation): Annotation(注解)就是 ...

  9. python如何通过pymongo连接到mongodb?

    python版本2.7,mongodb2.6.9,pymongo 首先在mongodb中创建一个数据库users,然后连接到users from pymongo import MongoClientm ...

  10. 删除某个ros包之后catkin_make冒错

    CMake Error at /home/ubuntu/Workspaces/rosProject/workspace1/devel/share/costmap_2d/cmake/costmap_2d ...