思路:

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. JDK7和JDK8新特性

    参考:http://www.cnblogs.com/langtianya/p/3757993.html JDK 1.7 新特性 1,switch中可以使用字串了 String s = "te ...

  2. ruby中nil?, empty? and blank?

    In Ruby, you check with nil? if an object is nil: article = nil article.nil? # => true empty? che ...

  3. PhoneGap应用图标icon和启动页面SplashScreen

    app/config.xml <icon gap:platform="android" gap:qualifier="ldpi" src="re ...

  4. 命名管道-MSDN例子

    服务器: #include "stdafx.h" #include <windows.h> #include <stdio.h> #include < ...

  5. centos6 安装teamviewer

    wget http://www.teamviewer.com/download/teamviewer_linux.rpm yum -y install temviewerX.rpm 机器最好联网,能够 ...

  6. 玩school 学习sql server 查询的网站

    http://www.w3school.com.cn/sql/sql_like.asp

  7. HDLM命令dlnkmgr详解之五_set

    set命令用来设置HDLM的操作环境及参数. set操作设置的大部分是dlnkmgr view -sys命令中显示的参数值 命令格式 dlnkmgr set { -lb on [ -lbtype { ...

  8. 10-08C#基础--进制转换

    (一).数制 计算机中采用的是二进制,因为二进制具有运算简单,易实现且可靠,为逻辑设计提供了有利的途径.节省设备等优点,为了便于描述,又常用八.十六进制作为二进制的缩写.一般计数都采用进位计数,其特点 ...

  9. DDD学习笔录——简介领域驱动设计的实践与原则

    DDD在存在许多DDD模式的同时,也有大量实践和指导原则,这些都是DDD思想体系成功的关键. 1.专注于核心领域 DDD强调的是在核心子域付出最多努力的需要.核心子域是你的产品会成功还是会失败的差异化 ...

  10. URL操作

    ThinkPHP 的 URL 操作.主要涉及到 URL 路径大小写.伪静态.生成以及模版中的 U()方法. 一.URL大小写 系统默认的规范是根据 URL 里面的模块名.控制器名来定位到具体的控制器类 ...