<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. 【BZOJ】1596: [Usaco2008 Jan]电话网络

    [算法]树上贪心 [题解] 因为一个点必须被覆盖,那么它如果没有被子树节点覆盖的话,就覆盖它的父节点. 从叶子开始贪心. 注意,如果它自己已经被选了就不需要选父节点了. #include<cst ...

  2. BZOJ 100题纪念

  3. bzoj 1089 SCOI2003严格n元树 递推

    挺好想的,就是一直没调过,我也不知道哪儿的错,对拍也拍了,因为数据范围小,都快手动对拍了也不知道 哪儿错了.... 我们定义w[i]代表深度<=i的严格n元树的个数 那么最后w[d]-w[d-1 ...

  4. bzoj 2330 SCOI2011糖果 查分约束系统

    就根据题目中给的约束条件建图就行了 需要注意的是,我们要做的是最长路,因为需要约束每个点都是大于0 那么可以建一个超级源指向所有点,超级源的dis是1,边长为0 那么这样做最长路就可以了 好了我们这么 ...

  5. 获取高德地图api

    先到高德开放平台首页按照关键字搜索地址,获取经纬度坐标: http://lbs.amap.com/console/show/picker 高德由坐标获取地址详细信息: http://restapi.a ...

  6. 应对ubuntu linux图形界面卡住的方法

    有的时候,我的ubuntu图形界面会卡住,当然这个时候你可以重新启动,不过最好的办法应该是结束这个桌面进程 那桌面卡住了怎么来结束桌面进程呢? 这时候就需要打开tty了 按下键盘ctrl+alt+f1 ...

  7. 单表扫描，MySQL索引选择不正确 并 详细解析OPTIMIZER_TRACE格式

    一 表结构如下:  万行 CREATE TABLE t_audit_operate_log (  Fid bigint(16) AUTO_INCREMENT,  Fcreate_time int(10 ...

  8. 安装vue，并新建一个项目

    Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便 ...

  9. LISTVIEW 消息 结构 宏

    如果是要画的话,用CreateWindowEx创建 指定 WC_LISTVIEW window class 关于其消息如下: LVM_APPROXIMATEVIEWRECT  LVM_ARRANGE  ...

  10. Selenium2+python自动化60-异常后截图（screenshot）【转载】

    前言 在执行用例过程中由于是无人值守的,用例运行报错的时候,我们希望能对当前屏幕截图,留下证据. 在写用例的时候,最后一步是断言,可以把截图的动作放在断言这里,那么如何在断言失败后截图呢? 一.截图方 ...