上传图片,点击触发隐藏得file
编辑一个div 将其宽高设定好 给其背景颜色
div class="form-group">
<label class="col-sm-2 control-label">上传图片</label> <div class="col-sm-10">
<div id="upimg" style="width: 300px; height: 200px; background-color: aquamarine; text-align: center; line-height: 200px;" onclick="UpLode()">
<span><i class="glyphicon glyphicon-open"></i>上传图片</span>
</div> </div>
</div>
设一个隐藏得file
<input id="FImg" onchange="GetFile()" type="file" style="display: none" />
这个隐藏得file可以写到body最下面
然后写js
点击直接触发file
function UpLode() {
//触发Fil的 点击事件
$("#FListImg").trigger("click");
}
再写个Js 让其上传后显示到上传框内
function GetFile() { //2 取上传后图片的值
//event.target.files[0] 获取指定上传控件内的第一个文件
var a = event.target.files[];
//取文件的路径 注意 浏览器的保密协议
var url = window.URL.createObjectURL(a);
//上传图片后让图片显示到上传框
$("#upimg").css('background', 'url(' + url + ')0% 0% / cover')
}
就OK了 点击就可取到图片,选中后就可以显示到上传框内
上传图片取值链接:https://www.cnblogs.com/yutang-wangweisong/p/11803409.html
上传图片,点击触发隐藏得file的更多相关文章
- Vue触发隐藏input file的方法
1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change ...
- IOS 点击空白处隐藏键盘的几种方法
IOS 点击空白处隐藏键盘的几种方法 IOS7 点击空白处隐藏键盘的几种方法 IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能 ...
- IOS7 点击空白处隐藏键盘的几种方法
IOS7 点击空白处隐藏键盘的几种方法 iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们 ...
- 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)
来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...
- HTML5--》点击显示隐藏内容
<details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- Js点击触发Css3的动画Animations、过渡Transitions效果
关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...
- 常见问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。
例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
随机推荐
- Python规范:用用assert
什么是assert assert的语法: assert_stmt ::= "assert" expression ["," expression] 例: ass ...
- Luogu4069 SDOI2016 游戏 树链剖分、李超线段树
传送门 每一次加的是一个一次函数,一些呈一次函数的线段求最小值,显然用到李超线段树. 然后把维护序列的李超线段树强行上树,就直接套上树剖就可以了. 至于李超树如何区间查询,因为一次函数线段的最小值一定 ...
- .Net Jpush极光推送
1.首先登陆极光官网注册账号 https://www.jiguang.cn/push 2.注册成功后,在应用管理中创建应用
- 如何把前端用ajax发过来的图片传到node上,并且用node保存在oss图片服务器上?
一:只上传一张图片 1.1:node需要安装的插件,先安好 npm install ali-oss uuid co --save A.ali-oss 用途:aliyun OSS(Object Stor ...
- JS中回调函数的简单用法
a能拿b,b能拿到c,c能拿到d,实现a拿到d的东西. function a() { b(function (data) { console.log(data); }); } function b(c ...
- 如何使用API的方式消费SAP Commerce Cloud的订单服务
最近Jerry在做一个微信和SAP Commerce Cloud集成的项目,需要在微信里调用后者的Restful API进行订单创建和读取.以前Jerry对SAP Commerce Cloud知之甚少 ...
- spring 自定义schema 加载异常 White spaces are required between publicId and systemId.
spring 项目启动报错 报错日志如下: Caused by: org.springframework.beans.factory.xml.XmlBeanDefinitionStoreExcepti ...
- jenkens + github
一 获取github accessToken 依次点击 settings----> Developer settings --->Personal access tokens 到这里如 ...
- python(if判断)
一.if判断 如果 条件满足,才能做某件事情, 如果 条件不满足,就做另外一件事情,或者什么也不做 注意: 代码的缩进为一个 tab 键,或者 4 个空格 在 Python 开发中,Tab 和空格不要 ...
- 听说你知道什么是锁 --JAVA
I.java中的锁 1.1 什么是锁 在计算机科学中,锁(lock)与互斥(mutex)是一种同步机制,用于在许多线程执行时对资源的限制. 锁通常需要硬件支持才可以有效实施.这种支持通常采用一 ...