思路:

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. 感知机学习算法Java实现

    感知机学习算法Java实现. Perceptron类用于实现感知机, 其中的perceptronOriginal()方法用于实现感知机学习算法的原始形式: perceptronAnother()方法用 ...

  2. uboot中的TEXT_BASE

    转载:http://blog.csdn.net/xxblinux/article/details/6281295 我们都知道U-BOOT分为两个阶段,第一阶段是(~/cpu/arm920t/start ...

  3. JavaScript基本概念C - 真与假

    真与假 与 c 和 c++ 非常相似, 但与 Java 不同, JS中被认为true或false范围很广.所有对象 (空字符串除外) 和非零数字都被视为 true.空字符串.零.null 和undef ...

  4. CSS3图片以中心缩放,放大超出隐藏实现

    首页,重点是有一个包裹img标签的容器,这里我们给该容器设置一个class为selfScale <div class="selfScale"> <img sr=& ...

  5. 如何修改AWR的retention,interval

    检查AWR当前设置: SQL> select * from dba_hist_wr_control; DBID SNAP_INTERVAL RETENTION TOPNSQL --------- ...

  6. jackson 进行json与java对象转换 之一

    代码无真相,为了最简单的说明,我直接上代码. public class User { private String name; private Gender gender; private List& ...

  7. 11-18网页基础--第二部分CSS样式属性(1)

    第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在&l ...

  8. node install error

    错误:Unexpected end of JSON input while parsing near.... 解决办法: npm cache clean --force

  9. 问题:table 可否实现对角线;结果:HTML 斜线 表头

    <HTML> <HEAD> <TITLE>斜线表头</TITLE>    </HEAD> <script    Language=&q ...

  10. C# WinForm 关闭登陆窗体后进程还再内存怎么办?

    问题:我们通常再制作WinForm应用程序的时候,运行程序的第一个窗口一般是登陆窗口.代码如下: 那么这种方式有一个弊端,这种启动方式,其实就是把登陆窗口设置为主窗体.因此,再登陆后,我们通常是调用H ...