jq怎么给图片绑定上传文件按钮

html代码

<img src="/img/zhengmian.png" class="file1">

<input type="file" id="file1" style="display:none;"/>

jq代码

//上传头像
$(function () {
  $(".file1").click(function () {
    $(this).siblings(‘#file1‘).click();
  });

});

原文地址:https://www.cnblogs.com/zdzdbk/p/10158438.html

时间: 2024-08-29 23:34:33

jq怎么给图片绑定上传文件按钮的相关文章

怎样用纯HTML和CSS更改默认的上传文件按钮样式

如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览器里的样子和布局是一样的上传文件按钮.我们可以这样: 步骤1.创建一个简单的HTML标记 1 2 3 4 <div class="fileUpload btn btn-primary">     <span>Upload</span>     <i

CSS:点击图片区域上传文件

前端菜鸟,本人目前只能看懂和抄代码.因为参与一个项目需要用到这块样式,于是在网上找到的例子.于是记下来,同时也是方便自己查阅. /*定义图像以及大小*/ .imageFileInput{ width: 200px; height: 200px; position: absolute; background-color: red; /*这里可以换成图片路径(background-image:../img/....)注意图片路径*/ } /*定义上传*/ .fileInput{ height: 10

万家报账平台没有“上传文件”按钮的解决办法

在有的电脑没有"上传文件"的按钮? 第一步:首先检查浏览器设置. 第二步:找到IE的Internet选项菜单,开启菜单栏的根据下列方面找,如下图: 第三步:找到Internet选项后,点击,选择安全选项卡,并点击"自定义级别" 第四步:找到"将文件上载到服务器时包含本地目录路径"选择"启用".然后点击确定关闭IE,重启打开. 第五步:更新浏览器的flash版本.在百度中搜索"flash player官网"即

上传文件按钮美化,上传文件前后状态控制

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的. input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 注:input 的 type 为 file 时,它的 name 必须有值,因为这个 name 会做为上传文件信息的数组名称. <a href="javascript:;" class=&q

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

web前端上传文件按钮自定义样式

思路: 按钮进行隐藏,样式自己该怎么写怎么写,之后通过js监测input改变上传文件. 前端写法: // jquery + bootstrap写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件获取URL</title> <link rel="stylesheet" h

修改上传文件按钮

HTML: <form id="imgFile" action="" method="post" enctype="multipart/form-data"> <a href="javascript:void(0);" class="file"> 上传头像 <input type="file" name="rp_pic_file

上传文件按钮代码示例

input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用a标签或其他标签包裹,就实现了美化功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a-upload { position: relative; dis

CSS自定义上传文件按钮样式(兼容I6+)

参考网址:http://www.alleyloft.com/contents/share?id=14 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin: 0;padding: 0;} .box{ position:relative; float:left; overflow: