思路:

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. JavaScript创建对象的几种重要模式

    一.工厂模式 1. 代码示例 function person(name, age) { var p = new object(); p.name = name; p.age = age; p.sayN ...

  2. canvas绘制中的API

    canvas绘制Z 先贴代码吧: /** * Created by Administrator on 2016/1/26. */ var i; function draw (id){ var canv ...

  3. 创建github怎样管理

    创建版本库 第一步: 创建一个版本库非常简单,首先,选择一个合适的地方,创建一个空目录 $mkdir learngit $cd learngit $pwd mkdir learngit 创建一个名叫“ ...

  4. RabbitMQ 消息队列 安装及使用

    RabbitMQ 消息队列安装: linux版本:CentOS 7 安装第一步:先关闭防火墙 1.Centos7.x关闭防火墙 [root@rabbitmq /]# systemctl stop fi ...

  5. Ubuntu 下 ROS Kinetic 的安装

    安装环境为 Ubuntu 16.04 配置 Ubuntu 软件仓库 打开“设置”中的“软件和更新” 把 “restricted”.“universe” 和 “multiverse” 这三项勾上 勾完后 ...

  6. ghld data format

    %CTF: 1.00%FileType: PROF strp "VelocityProfile"%PROFSpec: 1.00 2006 00 00%Manufacturer: C ...

  7. vb和dos批处理创建或生成快捷方式

    https://www.cnblogs.com/gszhl/archive/2009/04/23/1441753.html vb和dos批处理创建或生成快捷方式   首先说我现在用的一种,最有效的也是 ...

  8. Eclipse一步一步搭建SSM+Maven

          Eclipse 搭建SSM(Spring.Spring MVC .Mybatis)  利用Maven管理Jar包      一般而言,新的eclipse都已经集成了maven,如果没有那么 ...

  9. hibernate学习笔记(2)持久化类测试

    持久化类的创建: 创建一个共有的不带参数的构造方法: public void Students(){ } 创建一个带参数的构造方法: (快捷键创建) 生成get,set方法: *可以不用此方法创建持久 ...

  10. LINUX 使用DBCA创建ORACLE数据库