<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. oracle中函数

    一:前言 最近决定每天都把知识点总结下,然后每个星期把知识点在进行分类发表日志. 二:The Question (1):在oracle中进行年龄的计算,知道出生日期进行计算后截取,本来是一个很简单的函 ...

  2. python函数对象和闭包

    关于函数对象和闭包 闭包(closure)是函数式编程的重要的语法结构.不同的语言实现闭包的方式不同.Python以函数对象为基础,为闭包这一语法结构提供支持的 (我们在特殊方法与多范式中,已经多次看 ...

  3. Cpython解释器支持的进程与线程

    一.理论部分 一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): egon在一个时间段内有很多任务要做:python备课的 ...

  4. phpstorm+xdebug详解

    1.run->edit configurations StartUrl最好是网址,不然容易出错,Server选择的是配置时添加的Servers,详可参考:http://www.cnblogs.c ...

  5. 【SQL】单个表的查询

    看到一本好书:名字叫做<数据库系统基础教程> 第三版 岳丽华等译 讲得很清楚,也不啰嗦. 这里是书中第六章的部分笔记: 一.常见用法:  1. AS 定义别名 可省略 2. 可以用加减乘除 ...

  6. 学习apache commons lang3的源代码 （1）：前言和R

    本系列主要是针对lang3的3.7版本的源代码进行学习,并适当举例.一共大概150多个java文件,争取30天内学习完毕. 26个英文字母 争取每天学习1个字母开头的类们. 今天,就学习R开头的吧. ...

  7. PO/POJO/BO/DTO/VO的区别（转）

    PO :persistent object持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中与i ...

  8. 可折叠的listview 之ExpandableListView基本使用

    先看效果 demo实现 其他的方法和ListView的方法一样,下面来看看具体demo的实现 首先布局文件很简单,就一个控件为: <?xml version="1.0" en ...

  9. Java的Hashtable类（转）

    文章来源:http://blog.csdn.net/zhna123_2011/article/details/6741479 ps:直接copy 哈希表是一种重要的存储方式,也是一种常见的检索方法.其 ...

  10. qt资源下载网站

    1. 所有Qt版本下载地址: http://download.qt.io/archive/qt/ 2. 所有Qt Creator下载地址: http://download.qt.io/archive/ ...