编辑一个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的更多相关文章

  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. win10+aconda+pytorch

    1.需要建立项目的运行环境,每个项目应用的框架不用,所以对于每个项目分别用运行环境不会造成管理上的混乱以及应用上的冲突 2.建立项目运行环境: a.用管理员身份运行anconda prompt 创建c ...

  2. git简单介绍

    一种常见的版本控制工具 获取 克隆仓库 git支持以ssh或者http的方式来标识远程仓库 git clone git@github.com:username/project.git git clon ...

  3. Scratch编程:贪吃鱼(十一)

    “ 上节课的内容全部掌握了吗?反复练习了没有,编程最好的学习方法就是练习.练习.再练习.一定要记得多动手.多动脑筋哦~~” 01 — 游戏介绍 这是一个小游戏,通过键盘的方向键控制着大鲨鱼追着吃掉海星 ...

  4. Linux进程间通信—使用共享内存

    Linux进程间通信-使用共享内存 转自: https://blog.csdn.net/ljianhui/article/details/10253345 下面将讲解进程间通信的另一种方式,使用共享内 ...

  5. Unity的学习笔记(向量点乘和叉乘)

    public class AngleTest : MonoBehaviour { public GameObject cube; //主要的物体 public GameObject radCube; ...

  6. Oracle.EntityFrameworkCore使用时报错:ORA-00933:SQL命令未正确结束

    如果你在使用 Oracle.EntityFrameworkCore 在执行一些分页查询或者其他数据操作时,遇到“ORA-00933:SQL命令未正确结束”, 请先检查你的DbContext中UseOr ...

  7. NEST 根据id查询

    想要在NEST里根据id查询 GET /employee/employee/1 可使用Get方法 public IGetResponse<employee> GetDoc() { var ...

  8. JavaScript之变量

    var a; // 声明变量a,变量:值可以改变的,相当于数学x,y,z... a=10; // 将10赋值给a var test; var Test; /* 变量命名规则: 1.不能以数字开头 2. ...

  9. go中三个点(...)用法

    go命令中三个点含义 An import path is a pattern if it includes one or more "..." wildcards, each of ...

  10. MongoDB/聚合/MR

    管道与Aggregation: 文档结构如下: { "_id" : 1, "item" : "abc", "price" ...