<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. 51Nod 2006 飞行员配对(二分图最大匹配)-匈牙利算法

    2006 飞行员配对(二分图最大匹配) 题目来源: 网络流24题 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 第二次世界大战时期,英国皇家空军从沦陷国 ...

  2. AtCoder Regular Contest 082 F

    Problem Statement We have a sandglass consisting of two bulbs, bulb A and bulb B. These bulbs contai ...

  3. 【洛谷 P1667】 数列 （贪心）

    题目链接 对于一个区间\([x,y]\),设这个区间的总和为\(S\) 那么我们在前缀和(设为\(sum[i]\))的意义上考虑到原操作其实就是\(sum[x−1]+=S\) , \(sum[x]+S ...

  4. bzoj 2115 路径xor和最大值

    首先我们可以将这张图转化为一棵树,其中可能有好多环,肯定是从1走到N,其中可能经过好多环, 因为我们不走N在的一支,最后还是会走回来,因为a xor b xor b=a,所以相当于没走,就是走了个环, ...

  5. Linux rar乱码

    大家都知道,Linux下的中文乱码是一个很烦的事情,在这里我叫大家如何解决这个问题. rar乱码 ubunut下打开rar包,如果里面有中文就会显示乱码,其实就觉这个问题最简单了,只要把进入新立得,搜 ...

  6. appium===报错adb server version (31) doesn’t match this client (39); killing…的解决办法

    当使用在cmd窗口调用adb shell命令的时候 提示如下: adb server version (31) doesn't match this client (39); killing...er ...

  7. linux常用命令 ps

    linux常用命令 ps Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些线程的快照,就是执行ps命令的那个时刻的那些进程 ...

  8. 使用kubeadm安装kubernetes1.12.1

    kubeadm是kubernetes官方用来自动化高效安装kubernetes的工具,手动安装,特别麻烦. 使用kubeadm安装无疑是一种不错的选择. 1.环境准备 1.1系统配置 系统是CentO ...

  9. 使用Derby ij客户端工具

    Derby是开源的.嵌入式的Java数据库程序,ij是Derby提供的客户端工具,相当于其他数据库提供的sqlplus工具. ij是纯Java的程序,不用安装,使用起来就像运行普通的Java应用程序一 ...

  10. PHP常用函数及其注释

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...