编辑一个div   将其宽高设定好 给其背景颜色

  1. div class="form-group">
  2. <label class="col-sm-2 control-label">上传图片</label>
  3.  
  4. <div class="col-sm-10">
  5. <div id="upimg" style="width: 300px; height: 200px; background-color: aquamarine; text-align: center; line-height: 200px;" onclick="UpLode()">
  6. <span><i class="glyphicon glyphicon-open"></i>上传图片</span>
  7. </div>
  8.  
  9. </div>
  10. </div>

设一个隐藏得file

  1. <input id="FImg" onchange="GetFile()" type="file" style="display: none" />

  这个隐藏得file可以写到body最下面

然后写js

点击直接触发file

  1. function UpLode() {
  2. //触发Fil的 点击事件
  3. $("#FListImg").trigger("click");
  4. }

再写个Js 让其上传后显示到上传框内

  1. function GetFile() {
  2.  
  3. //2 取上传后图片的值
  4. //event.target.files[0] 获取指定上传控件内的第一个文件
  5. var a = event.target.files[];
  6. //取文件的路径 注意 浏览器的保密协议
  7. var url = window.URL.createObjectURL(a);
  8. //上传图片后让图片显示到上传框
  9. $("#upimg").css('background', 'url(' + url + ')0% 0% / cover')
  10. }

就OK了  点击就可取到图片,选中后就可以显示到上传框内

上传图片取值链接:https://www.cnblogs.com/yutang-wangweisong/p/11803409.html

上传图片,点击触发隐藏得file的更多相关文章

  1. Vue触发隐藏input file的方法

    1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change ...

  2. IOS 点击空白处隐藏键盘的几种方法

    IOS 点击空白处隐藏键盘的几种方法     IOS7 点击空白处隐藏键盘的几种方法   IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能 ...

  3. IOS7 点击空白处隐藏键盘的几种方法

    IOS7 点击空白处隐藏键盘的几种方法   iOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们 ...

  4. 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

      来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...

  5. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

  6. 深入A标签点击触发事件而不跳转的详解

    本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...

  7. Js点击触发Css3的动画Animations、过渡Transitions效果

    关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...

  8. 常见问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  9. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

随机推荐

  1. Appium移动端自动化测试--使用IDE编辑并强化脚本

    目录 Appium客户端安装 安装Python IDE-Pycharm Java IDE 安装 使用隐式等待让用例更稳定 隐式等待 启动Appium非GUI模式:Appium Server 安装Pyt ...

  2. C++学习笔记 之 循环

    循环 循环语句允许我们多次执行一个语句或者语句组.(插入流程图) 循环类型 C++为我们提供的循环类型如下: 循环类型 描述 while循环 当给定条件为真时,重复语句或语句组.它会在执行循环主体之前 ...

  3. Android--Google Map API V2使用

    一.获取API Key 1.先获取SHA-1 fingerprint 数字证书是有两种,一种是debug,还有release.前者只能用于测试:后者才可以用于实际产品. debug:在命令行中输入命令 ...

  4. Helm命令帮助参数

    # helm help The Kubernetes package manager To begin working with Helm, run the 'helm init' command: ...

  5. 【转载】终于有人把“TCC分布式事务”的实现原理讲明白了

    之前网上看到很多写分布式事务的文章,不过大多都是将分布式事务各种技术方案简单介绍一下.很多朋友看了还是不知道分布式事务到底怎么回事,在项目里到底如何使用. 所以这篇文章,就用大白话+手工绘图,并结合一 ...

  6. CORS讲解

    跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资 ...

  7. 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 ...

  8. Web应用和Web框架

    一.Web应用 二.Web框架 三.wsgiref模块 一.Web应用 1.什么是Web应用? Web应用程序是一种可以通过Web访问的应用程序,特点是用户很容易访问,只需要有浏览器即可,不需要安装其 ...

  9. VBA编程图表(二十一)

    使用VBA,可以根据特定标准生成图表.下面通过一个例子来看看它如何实现. 第1步 - 输入要生成图形的数据. 第2步 - 创建3个按钮 - 一个生成条形图,另一个生成饼图,另一个生成柱形图. 第3步 ...

  10. IOS - UDID IDFA IDFV MAC keychain

    在开发过程中,我们经常会被要求获取每个设备的唯一标示,以便后台做相应的处理.我们来看看有哪些方法来获取设备的唯一标示,然后再分析下这些方法的利弊. 具体可以分为如下几种: UDID IDFA IDFV ...