null - 程序员宅基地

html5上传图片立即看到效果和图片替换_h5 图片的替换上传-程序员宅基地

1.先写一个和

<img id="headImg" src="../img/assets/Oval 2.png"/>
<input type="file" id="fileInput" class="fileInput img-circle" />

2.通过Css,控制这两个元素的位置，使他们大小相同，位置相同，达到重合的状态。读者可以更加自己的需要调整位置。
这里写图片描述

#headImg{
    width: 160px;
    height: 160px;
    margin-top: 72px;
    margin-left: 510px;
    border-radius: 50%;
}
#fileInput{
    float: left;
    width: 160px;
    height: 160px;
    opacity: 0.0;
    background: black;
    cursor: pointer;
    margin-top: -160px;
    margin-left: 510px;
}

这里写图片描述
3.用js获取file的url，再赋值个img的src,就能达到立即显示的效果。

//建立一個可存取到該file的url
function getObjectURL(file) {
    
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
//用户的头像立即查看
$("#fileInput").change(function() {
    
    var objUrl = getObjectURL(this.files[0]);
    if (objUrl) {
        $("#headImg").attr("src", objUrl);
    }
});

本文链接：https://blog.csdn.net/a419419/article/details/74659147

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Spring Cloud Eureka项目切换注册中心到Nacos_eureka切换nacos-程序员宅基地

文章浏览阅读1.9k次，点赞2次，收藏7次。Spring Cloud 项目平滑将注册中心迁移到Nacos上1.问题概述由于项目升级,需要将Eureka注册中心改为阿里的Nacos作为注册中心项目环境1、Java 使用的 JDK-1.82、Spring Boot 使用的 Spring Boot-2.1.4.RELEASE3、Spring Cloud 使用的是 Greenwich.RELEASE2.方案设计2.1 业务应用多注册到Nacos和EurekaSpring Cloud应用默认不支持启动时双向注册，但是阿里商业版上云edas_eureka切换nacos

嵌入式基本知识必备_嵌入式中40u表示什么?-程序员宅基地

文章浏览阅读1.6k次，点赞4次，收藏15次。关于嵌入式产品常用元器件知识，本文多数资料来源网络，再次做整理总结。好了，开始启程！一、IC的三个温度等级芯片上表示对应温度范围C:表示商业级集成芯片(IC)，温度定额为 0℃～+70℃；I: 工业级集成芯片(IC)，温度定额为 -40℃～+85℃；A: 汽车工业级芯片(IC),温度定额为 -40℃～+125℃M:..._嵌入式中40u表示什么?

还原二叉树-程序员宅基地

文章浏览阅读202次。给定一棵二叉树的前序遍历序列和中序遍历序列，要求计算该二叉树的高度。

用CPLEX写个数学模型就这么难？_cplex does not support nonconvex quadratic constra-程序员宅基地

文章浏览阅读6.4k次，点赞20次，收藏148次。一、前言小编有个小伙伴，隔三差五就过来跟我说：这个模型CPLEX怎么写呢？我说我不是给你讲过好多次？他说CPLEX太复杂了，俺没学过学不会呢。Similarly，遇到这个问题的不止小编这个小伙伴。很多刚入行的小伙伴都表示CPLEX对初学者来说并不是很友好，就连学习资料都不知道去哪里看，不像Excel或者Word，百度一下出来好多资料。其实吧，这玩意儿并没有大家想的那么难，尤其是简单使用CPLEX求解一个模型的话，用来用去都是那几个函数而已。下面小编来给大家好好理一下，看完相信你也能用CPLEX跑一下论_cplex does not support nonconvex quadratic constraints

R语言在矢量地图上绘制分级设色散点图_r语言在地图上绘制不同颜色散点图-程序员宅基地

文章浏览阅读1.9k次。实现效果：R语言中ggplot2包提供绘制地图、散点图的方法，是实现在矢量地图上绘制分级设色散点图核心包绘制多边形geom_polygon（data,aes,fill, colour）绘制点 geom_point .....0、需要用到的包library(maptools) # 读取shp数据常用，可以将shp数据读取为SpatialPolygonsDataFrame 格式，为DataFrame（数据帧）子类，也称为空间多边形数据帧library(ggplot2) #绘图核..._r语言在地图上绘制不同颜色散点图

【matlab】求空间两个向量之间的夹角_matlab 向量夹角-程序员宅基地

文章浏览阅读3.1w次，点赞28次，收藏73次。原点O[0,0,0]OA=[1,1,0];OB=[1,0,0];sigma = acos(dot(OA,OB)/(norm(OA)norm(OB)));%弧度制sigma/pi180%换算成角度_matlab 向量夹角

随便推点

java.lang.ProcessBuilder类（系统进程）_processbuilder pb = new processbuilder-程序员宅基地

文章浏览阅读546次。转载地址：http://lavasoft.blog.51cto.com/62575/15662/一、概述 ProcessBuilder类是J2SE 1.5在java.lang中新添加的一个新类，此类用于创建操作系统进程，它提供一种启动和管理进程（也就是应用程序）的方法。在J2SE 1.5之前，都是由Process类处来实现进程的控制管理。每个 Proces_processbuilder pb = new processbuilder

满城中学-程序员宅基地

文章浏览阅读1.5k次。自传4、在满城中学上高一----拉黎耕地一九五九年九月，我到满城上高中。这是一所县办校，当时只招高中生。校址设在城南部，校外坡下黄土坑。砖墙瓦盖东西院，临近大街路畅通。东院教室有三栋，里面充满读书声。西院师生当宿舍，水井台在院当中。两院中隔宽街道，由南向北直贯通。南端书店汽车站，北去商店理发厅。化学老师班主任，三十几岁黑面容。穿着整齐而朴素，对人严肃而真诚。俄语老师张琳娜，中国姑娘苏联名。..._满城中学9708班

QUESTION 41-benefits of installing Grid Infrastructure software_which are two benefits of installing grid infrastr-程序员宅基地

文章浏览阅读97次。What are two benefits of installing Grid Infrastructure software for a stand-alone server before installing and creating an Oracle database? (Choose two.)A. Effectively implements role separationB. Enables you to take advantage of Oracle Managed Files.C._which are two benefits of installing grid infrastructure software for a stan

基于SegNet和UNet的遥感图像分割代码解读_unet遥感图像分割-程序员宅基地

文章浏览阅读5.6k次，点赞9次，收藏104次。基于SegNet和UNet的遥感图像分割代码解读目录基于SegNet和UNet的遥感图像分割代码解读前言概述代码框架代码细节分析划分数据集gen_dataset.pyUNet模型训练unet_train.py模型融合combind.pyUNet模型预测unet_predict.py分类结果集成ensemble.pySegNet模型训练segnet_train.py前言上了一学期的课，趁着寒假有时间，看了往年论文和部分比赛的代码，现在整理出来。整理的这部分内容以实际操作为主，主要讲解代码部分的分析。概_unet遥感图像分割

Vue组件开发——异步组件_vue2 defineasynccomponent-程序员宅基地

文章浏览阅读566次。一、引入我们在讲异步组件之前，我们再来回顾一下webpack打包时的分包操作。我们可以使用import()异步加载模块来实现分包操作。import函数的返回值是一个Promise，所以我们可以使用then进行下一步处理。如下图所示为打包后的文件目录，因为我们如果同步加载math.js文件，此时就不存在中间的文件，此时当浏览器请求资源时，就会很慢。二、vue中的异步组件通过上面的webpack配置我们明白了为什么要进行分包操作，此时我们想一个问题，如果一个网站的页面在用户第一次浏览器时就将全部页面_vue2 defineasynccomponent

解决ToolBox升级IDEA后导致之前配置的插件消失问题（附：IDEA2020版本前后配置文件地址）【修理篇】_toolbox 下载的ide没有copy之前的插件进来-程序员宅基地

文章浏览阅读2.5k次。【修理篇】ToolBox升级IDEA后之前配置的插件消失问题（附：IDEA2020版本前后配置文件地址）在IDEA的插件配置地址都是可配置的，通过修改idea.properties可指定插件和logs的地址等这个配置文件地址在IDEA2020.1版本后出现了一些变化。如下：2020.1版本之前:配置文件地址在IDEA安装目录的bin目录下。2020.1版本之后:在此版本之后有两种方法。1.从C盘\User\Administrator里开始找AppData\Roaming\JetBra_toolbox 下载的ide没有copy之前的插件进来