思路:

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. [转载]Linux驱动-SPI驱动-概述

    转载地址http://blog.csdn.net/droidphone SPI是"Serial Peripheral Interface" 的缩写,是一种四线制的同步串行通信接口, ...

  2. 想开发VR游戏?你需要注意这些东西

    转自:http://www.gamelook.com.cn/2016/03/246620 开发VR游戏很难吗?有些人会说是,但在HTC虚拟现实新科技部门副总经理鲍永哲看来,VR游戏的门槛并不比一般的游 ...

  3. 开发环境入门 linux基础 (部分)nginx和nfs

    nginx和nfs 复习总结 rpm -ivh 软件包 --nodeps (没有依赖性安装) rpm -ivh 软件包 --force (覆盖安装) yum -y upgrade 升级所有包,不改变软 ...

  4. python的raw_input()函数。 函数的可变对象和不可变对象作为参数传递。

    python的raw_input()函数, 接受键盘输入, 其返回值是字符串类型, 所以当输入的是数字时, 如果是想参与算术运算, 必须要对其进行类型转换. python的参数传递, 对于可变对象和不 ...

  5. IIS安装与部署,站点的部署与配置

    第一章:IIS安装与部署 一,服务器概念的理解: 将设计好的软件只要部署到一台机器(服务器--->IIS)上,其它的员工通过浏览器(网址.)来进行访问. 做好的网站必须部署到这台机器上的IIS中 ...

  6. js将数组中一个或多个字段相同的子元素中合并

    最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...

  7. #pragma execution_character_set("utf-8")

    VC2010增加了“#pragma execution_character_set("utf-8")”,指示char的执行字符集是UTF-8编码. VS2010 设置 字符编码: ...

  8. byte[] 的toString() 和 new String(byte[]) 的区别

    今天在Android上测试压缩和解压缩. 获得压缩后的byte[]数组后,直接用 byte[].toString()方法取得字符串. 然后用这个字符串再反向来解压缩,还原数据.却发现还原回来的字符串有 ...

  9. Android开源地图项目 BigPlanetTracks 学习随笔

    一.         app主体部分 [tyt.android.bigplanettracks] 二.         地图部分 [tyt.android.bigplanettracks.maps] ...

  10. 无法解决 equal to 操作中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_BIN" 之间的排序规则冲

    在两个数据库之间进行复合查询时有时会出现如下错误: 无法解决 equal to 操作中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_BIN&qu ...