<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. Java基础学习知识体系图

  2. Flink源码阅读（一）--Checkpoint触发机制

    Checkpoint触发机制 Flink的checkpoint是通过定时器周期性触发的.checkpoint触发最关键的类是CheckpointCoordinator,称它为检查点协调器. org.a ...

  3. 【mysql优化1】表的优化与列类型选择

    数据类型及字节数参考http://www.cnblogs.com/qlqwjy/p/8590639.html -------------------------表的优化:--------------- ...

  4. 培训补坑(day8:树上倍增+树链剖分)

    补坑补坑.. 其实挺不理解孙爷为什么把这两个东西放在一起讲..当时我学这一块数据结构都学了一周左右吧(超虚的) 也许孙爷以为我们是省队集训班... 好吧,虽然如此,我还是会认真写博客(保证初学者不会出 ...

  5. kuangbin带你飞 最短路 题解

    求一个图最短路边的办法.好像下面的那个有问题.单向边和双向边一定是有区别的.这个比较容易.参照该文的最短路网络流题目和连通图题目一题求最短路关节边 另外上述2个题目的代码好像有问题. 在UVALIVE ...

  6. JavaScript阻止修改对象的三种方式

    JavaScript中,我们希望别人无法修改我们创建的对象.比如,代码库的作者很可能想锁定核心库的某些部分来保证它们不被意外地修改.ES5中引入了三种锁定修改的级别:防止扩展preventExtens ...

  7. Windows+Ubuntu双系统如何设置Windows为第一启动项

    在安装双系统的时候,如果先安装的是Windows然后再安装Ubuntu系统,开机时是以Ubuntu的grub来引导Windows的,而且默认进入Ubuntu系统,下面我们介绍如何更改这个默认项,然后让 ...

  8. 第一步：Java开发环境的配置

    一.下载JDK 下载地址:www.oracle.com.如下图: 二.配置JDK 安装JDK一直点击下一步就可以,默认是安装在C盘里.如下图: 然后配置系统路径(主要目的是方便开发),参考地址:jin ...

  9. Arduino mega 2560驱动安装失败(没有建立对验证码(TM)签名的目录的发布者信任)的解决方法

    转载请注明出处,谢谢...... 放假的时候在自己家台式机上安装时候是很顺畅的,今天在自己本子上安装的时候就不行了~ IDE版本:1.05 问题描述:在网上搜索了相关问题,发现绝大部分安装失败的时候都 ...

  10. （转）Docker 基础 : Dockerfile

    全文来自 Docker 基础 : Dockerfile Dockerfile 是一个文本格式的配置文件,用户可以使用 Dockerfile 快速创建自定义的镜像.我们会先介绍 Dockerfile 的 ...