思路:

1、重写一个新的样式 
2、将默认样式设置display:none;,即设为不可见 
3、在js里调用:当点击新样式的时候,调用这个input的点击事件

html:

<div class="head-img">
<img src="./imgs/王小波.jpg" id="my-img">
<input type="file" id="img-upload"/>
</div>

css:

.head-img{
text-align: center;
} #img-upload{
display: none;
}

Js:

$(document).ready(function(){
$('#my-img').click(function(){
$('#img-upload').click();
}); });

  

改变HTML文件上传控件样式的更多相关文章

  1. 改变FileUpload文件上传控件的显示方式,确认后上传

    一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="File ...

  2. 改变FileUpload文件上传控件的显示方式,选择文件后自动上传

    一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="File ...

  3. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  4. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  5. jquery文件上传控件 Uploadify(转)

    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...

  6. ***文件上传控件bootstrap-fileinput的使用和参数配置说明

    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...

  7. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

  8. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  9. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

随机推荐

  1. Web中的安全性问题

    根据2010年OWASP发布的Web应用程序安全风险主要是SQL注入攻击.跨网站脚本.伪造客户端请求.Cookie盗取,传输层保护不足. 1 SQL注入攻击  随着B/S框架结构在系统开发中的广泛应用 ...

  2. 蓝桥杯 基础练习 BASIC-22 FJ的字符串

    基础练习 FJ的字符串   时间限制:1.0s   内存限制:512.0MB 问题描述 FJ在沙盘上写了这样一些字符串: A1 = “A” A2 = “ABA” A3 = “ABACABA” A4 = ...

  3. JDK 8 equals() & ==

    equals() 是 java.lang.Object 的一个实例方法,被所有的子类所继承(可被复写). 以下是 JDK 8 中 java.lang.Object.equals() 源码: publi ...

  4. 西安电子科技大学第16届程序设计竞赛 G-小国的复仇

    西安电子科技大学第16届程序设计竞赛网络同步赛 G-小国的复仇 2 链接:https://www.nowcoder.com/acm/contest/107/G来源:牛客网 题目描述 众所周知,汀老师是 ...

  5. PostgreSQL 9.5 高可用、负载均衡和复制

    高可用.负载均衡和复制 1. 不同方案的比较 共享磁盘故障转移 共享磁盘故障转移避免了只使用一份数据库拷贝带来的同步开销. 它使用一个由多个服务器共享的单一磁盘阵列.文件系统(块设备)复制 DRBD是 ...

  6. Repmat:Replicate and tile an array

    Repmat:Replicate and tile an array Syntax B = repmat(A,m,n) B = repmat(A,[m n]) B = repmat(A,[m n p. ...

  7. DAY10-MYSQL库操作

    一 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MyS ...

  8. JS写一个简单的程序,判断年份是平年还是闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Github修改项目显示的语言类型

    //仓库的根目录下创建 .gitattributes 文件,添加以下代码: *.js linguist-language=java *.css linguist-language=java *.htm ...

  10. LinkedHashMap和HashMap的区别

    一.问题描述: 前几天写webservices接口,需要同步人力资源,涉及到添加顺序:主账号需要添加在次账号之前,直接上级需要添加在下级之前.解析xml之后直接封装在HashMap中,导致取对象时顺序 ...