<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. SQL优化之一

    使用union代替or,可以提升查询效率. 使用or时,会自动放弃已有的索引

  2. 「6月雅礼集训 2017 Day2」C

    [题目大意] 有一棵n个点的完全二叉树,边权均为1,每个点有小鸟容量c[i] 依次来了m只小鸟,第i只小鸟初始位置在pos[i]上,问来了x只小鸟的时候,怎样安排小鸟的路线可以使得小鸟移动的边权和最小 ...

  3. bugscan泄露代码解密

    #{文件名:decode key} dekey_dict= {'expback_64pyc_dis.py': 'ef632082c7620cf54876da74a1660bfb9c06eb94549b ...

  4. Linux设置编译器环境变量

    Linux设置编译器环境变量 https://jingyan.baidu.com/article/9f7e7ec0bb22aa6f29155453.html Linux添加环境变量与GCC编译器添加I ...

  5. ORACLE中通过DBMS_CRYPTO包对表敏感字段进行加密

    http://doc.primeton.com/pages/viewpage.action?pageId=4917998

  6. [libgdx游戏开发教程]使用Libgdx进行游戏开发(6)-添加主角和道具

    如前所述,我们的主角是兔子头.接下来我们实现它. 首先对AbstractGameObject添加变量并初始化: public Vector2 velocity; public Vector2 term ...

  7. RASscan

    内网端口极速扫描器 软件下载地址:https://github.com/RASSec/RASscan 命令: Python Rasscan.py 网络第一个ip 网络最后一个ip

  8. .NET Core CLI

    NET Core 命令 一. 帮助命令 dotnet help 使用情况: dotnet [sdk-options] [command] [command-options] [arguments] 执 ...

  9. fastxml Jackson annotation使用小记

    dependencies: compile("com.fasterxml.jackson.core:jackson-annotations") compile("com. ...

  10. Codeforces #449 Div2 D

    #449 Div2 D 题意 交互式类题目. 起始有 n 张纸,会给出 m 次数字 p (\(1 \leq p \leq c\)),每次可选择一张纸,并在纸上写上这个数字,如果纸上已经存在数字,会覆盖 ...