思路:

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. c++11之三: sizeof运算符 auto的优势 __func__预定义标识符

    在C++11中,对非静态成员变量使用sizeof操作是合法的. auto推导的一个最大优势就是在拥有初始化表达式的复杂类型变量声明时简化代码.如:std:vector<std::string&g ...

  2. clone对象的克隆

    用一句简单的话来说就是浅拷贝,只是对指针的拷贝,拷贝后两个指针指向同一个内存空间,深拷贝不但对指针进行拷贝,而且对指针指向的内容进行拷贝,经深拷贝后的指针是指向两个不同地址的指针. 等多 http:/ ...

  3. HTML5通信

    跨文档消息传输 HTML5中提供了在网页文档之间互相接收与发送信息的功能.使用这个功能只要获取到网页所在窗口对象的实例,无论是否同源都可以实现跨域通信.经常用于不同frame之间的通信. 当我们想要接 ...

  4. HTTP-Runoob:HTTP请求方法

    ylbtech-HTTP-Runoob:HTTP请求方法 1.返回顶部 1. HTTP请求方法 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, PO ...

  5. Linux打包下载命令

    语法:tar [主选项+辅选项] 文件或者目录使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项: c 创建新的档案文件.如果用户想备份一个目录或是一些 ...

  6. Jmeter 分布式压测及可能出现的问题;

    (注:master与slave机的jmeter版本必须保持一致) master机器上的准备工作如下: 1.先准备一个调试通过的下单接口: 2.找到jmeter的bin目录下的jmeter.proper ...

  7. Task用法(2)-任务等待wait

    1.Wait 用法   默认情况下,Task 是有线程池中的异步线程执行,是否执行完成,可以通过Task的的属性IsCompleted 来判断,  如果想在子线程工作完成之后,在进行后续主线程工作可以 ...

  8. 浅析JAVA Runtime原理与过各大厂商免杀webshell制作

    Author:Sevck Date:2017年6月24日 昨天在网络尖刀老年活动中心群里,忽然想到一个问题,就是JAVA在运行Runtime执行命令的时候会不会调用bash,因为php等语言会调用ba ...

  9. Cookies和Session的定义与区别

    Cookies和Session二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当下次你再光临同一个网 ...

  10. ActiveMQ (二) JMS入门

    JMS入门 前提:安装好了ActiveMQ  ActiveMQ安装 Demo结构: 首先pom.xml引入依赖: <dependency> <groupId>org.apach ...