思路:

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. bash 中的行处理命令 awk

    转自:http://blog.chinaunix.net/uid-23302288-id-3785105.html

  2. Java-API-POI-Excel:SXSSFWorkbook Documentation

    ylbtech-Java-API-POI-Excel:SXSSFWorkbook Documentation 1.返回顶部 1. org.apache.poi.xssf.streaming Class ...

  3. Spring学习十 rest

    1:  Web  service:  是一个大的概念范畴,它表现了一种设计思想 SOAP 是 Web service 的一个重要组成部份. SOAP 是一种协议而非详细产品.SOAP 是通过 XML ...

  4. appium-unittest框架中的断言

    1.首先unittest本身是一个python的测试框架,他有他自己的使用规则: 2.如果用其中的方法,需要引入,方法: import unittest class Login(unittest.Te ...

  5. form(去掉关闭按钮,禁止调整大小)

    禁止Form窗口调整大小方法:FormBorderStyle 设为FixedSingle: 不能使用最大化窗口: MaximuzeBox 设为False: 不能使用最小化窗口:   MinimizeB ...

  6. Android Fragment用法详解(1)--静态使用Fragment

    先说明一下,本例子是运行在Android Studio下面的.同样的代码复制粘贴到Eclipse运行却会报错.具体原因我也没有细查.知道的哥们,留言通知下呗. Fragment,也就是碎片,本意是为了 ...

  7. 我积累的Java实用代码

    1.解压zip文件 /** * 解压输入的zip流,Java默认的解压只能处理UTF-8编码的文件或者目录名,否则会报MALFORMED异常 * * @param is 输入流 * @param ou ...

  8. 使用网络用户命令行工具的/passwordreq:yes

    提示:"新建域时,本地administrator帐户将成为域administrator账户.无法新建域,因为本地administrator账户密码不符合要求.目前,本地administrat ...

  9. ActionBarActivity的使用注意事项

    1.调用getActionbar()方法返回为空的解决方法 此activity是设计来支持低版本系统用actionbar的,低版本没有getActionbar() 需要使用 getSupportAct ...

  10. js对象排序&&倒序

    按照对象的值大小排序对象 function sortObj(obj) { var arr = []; for (var i in obj) { arr.push([obj[i],i]); }; arr ...