上传图片,点击触发隐藏得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 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
随机推荐
- Appium移动端自动化测试--使用IDE编辑并强化脚本
目录 Appium客户端安装 安装Python IDE-Pycharm Java IDE 安装 使用隐式等待让用例更稳定 隐式等待 启动Appium非GUI模式:Appium Server 安装Pyt ...
- C++学习笔记 之 循环
循环 循环语句允许我们多次执行一个语句或者语句组.(插入流程图) 循环类型 C++为我们提供的循环类型如下: 循环类型 描述 while循环 当给定条件为真时,重复语句或语句组.它会在执行循环主体之前 ...
- Android--Google Map API V2使用
一.获取API Key 1.先获取SHA-1 fingerprint 数字证书是有两种,一种是debug,还有release.前者只能用于测试:后者才可以用于实际产品. debug:在命令行中输入命令 ...
- Helm命令帮助参数
# helm help The Kubernetes package manager To begin working with Helm, run the 'helm init' command: ...
- 【转载】终于有人把“TCC分布式事务”的实现原理讲明白了
之前网上看到很多写分布式事务的文章,不过大多都是将分布式事务各种技术方案简单介绍一下.很多朋友看了还是不知道分布式事务到底怎么回事,在项目里到底如何使用. 所以这篇文章,就用大白话+手工绘图,并结合一 ...
- CORS讲解
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资 ...
- This project references NuGet package(s) that are missing on this computer. Enable NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=317567.
记事本打开csproj文件 搜索nuget 删除Target节点 类似如下: <Target Name="EnsureBclBuildImported" BeforeTarg ...
- Web应用和Web框架
一.Web应用 二.Web框架 三.wsgiref模块 一.Web应用 1.什么是Web应用? Web应用程序是一种可以通过Web访问的应用程序,特点是用户很容易访问,只需要有浏览器即可,不需要安装其 ...
- VBA编程图表(二十一)
使用VBA,可以根据特定标准生成图表.下面通过一个例子来看看它如何实现. 第1步 - 输入要生成图形的数据. 第2步 - 创建3个按钮 - 一个生成条形图,另一个生成饼图,另一个生成柱形图. 第3步 ...
- IOS - UDID IDFA IDFV MAC keychain
在开发过程中,我们经常会被要求获取每个设备的唯一标示,以便后台做相应的处理.我们来看看有哪些方法来获取设备的唯一标示,然后再分析下这些方法的利弊. 具体可以分为如下几种: UDID IDFA IDFV ...