<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. Chrome 本地通信

    http://blog.csdn.net/ztmaster/article/details/52684772

  2. [bzoj1015][JSOI2008]星球大战——并查集+离线处理

    题解 给定一张图,支持删点和询问连通块个数 按操作顺序处理的话要在删除点的同时维护图的形态(即图具体的连边情况),这是几乎不可做的 我们发现,这道题可以先读入操作,把没删的点的边先连上,然后再倒序处理 ...

  3. Method and apparatus for providing total and partial store ordering for a memory in multi-processor system

    An improved memory model and implementation is disclosed. The memory model includes a Total Store Or ...

  4. Pyhton-Requests之接口测试

    非常感谢[百人计划]五娃的分享!下面是整理的笔记: 一.环境准备: Pyhton 2.x或者Pyhton 3.x.Requests库.(我安装的版本是Pyhton 3.4) 安装 Pyhton 3.x ...

  5. nginx之旅：安装及简单部署

    安装之前最好了解一下nginx,参考nginx百度百科吧,下面这一句话基本概括了nginx的基本功能 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理  ...

  6. CSDN博客用Windows Live Writer方法，终于可以离线编辑了！

    以下是安装WLW 和相关设置: 1. 下载安装WLW (步骤略,可自行下载,官方下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id ...

  7. （十一）mysql备份之物理备份xtrabackup

    (1)备份介绍 (2)下载安装xtrabackup 官网:https://www.percona.com/downloads/XtraBackup/LATEST/ 我选择yum安装,centos版本7 ...

  8. win10下MongoDB安装

    下载 MongoDB 官网下载链接 如果被墙的话,请点击 mongodb-win32-x86_64-2008plus-ssl-3.4.1-signed.msi 下载 选择custom安装方式,手动切换 ...

  9. python redis使用方法

    一.mac 下redis安装 1.brew安装redis brew install redis 2.启动redis服务器 brew services start redis 或者 redis-serv ...

  10. python3类方法，实例方法和静态方法

    今天简单总结下python的类方法,实例方法,静态方法. python默认都是实例方法,也就是说,只能实例对象才能调用这个方法. 那是不是说类方法也只能被类对象本身来调用呢,当然,不是.类方法既可以被 ...