js 点击按钮或者图片，实现图片上传并显示在页面上

点击图片本身，实现图片上传：

<div class="card">//    用于接受上传的图片<img src="img.jpg"  alt="" id="picture">// 用于上传文件<input class="file-upload" type="file" accept="image/*" name="picture"/>
</div>

.file-upload { display: none; // 设置上传文件的input隐藏
}


/*
* 点击图片，上传新图片
* */
$(document).on("click", "#picture", function () {// 点击图片的同时，点击上传文件的input$('.file-upload').click();// 将上传的图片显示到页面上$(document).on("change", ".file-upload", function () {var fileObj = $(".file-upload")[0];var img = document.getElementById('picture'); //获得用户上传的图片节点var reader = new FileReader();// 转换成功后的操作，img.src即为转换后的DataURLreader.onload = function(e) {if (reader.readyState === 2) { //加载完毕后赋值img.src = e.target.result;console.log(img.src);}}reader.readAsDataURL(fileObj.files[0]);});
});

点击按钮，实现图片上传：


<div class="card">//   用于接受上传的图片<img src="img.jpg"  alt="" id="picture"><button type="button" class="btn btn-primary" id="btn" >上传文件</button>// 用于上传文件<input class="file-upload" type="file" accept="image/*" name="picture"/>
</div>

CSS同理

/*
* 点击按钮，上传新图片
* */
$(document).on("click", "#btn", function () {// 点击图片的同时，点击上传文件的input$('.file-upload').click();// 将上传的图片显示到页面上$(document).on("change", ".file-upload", function () {var fileObj = $(".file-upload")[0];var img = document.getElementById('picture'); //获得用户上传的图片节点var reader = new FileReader();// 转换成功后的操作，img.src即为转换后的DataURLreader.onload = function(e) {if (reader.readyState === 2) { //加载完毕后赋值img.src = e.target.result;console.log(img.src);}}reader.readAsDataURL(fileObj.files[0]);});
});

js 点击按钮或者图片，实现图片上传并显示在页面上相关推荐

高德地图点击按钮，控制高德地图上的热力图显示与隐藏
1.定义按钮,绑定事件 <a-button class="btn2" @click="ontimeHeatmap">实时人口热力图</a-bu ...
Viewer.js点击按钮放大图片用法
1.Viewer.js点击按钮放大图片用法 <div onclick="getHideBig('hide_img_weight1')" id="btn_img_we ...
Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...
uniapp点击按钮保存页面为图片到本地
uniapp点击按钮保存页面为图片到本地首先写一个按钮创建事件 <button class="info" @click="capture()"> ...
图片和文件上传js剖析
/** * 商户资质信息模块js * * 涉及页面组件 { * 上传组件(UploadFileComponent) * } * * * 初始化工具(init) * * @Author:Waver */ ...
js插件+UploadFile类实现图片的批量上传
文件上传无疑是web应用中一个非常常用的功能,下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传. 首先,给大家介绍展示一下具体操作页面: h ...
html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
基于HTML5+JS实现本地图片裁剪并上传功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

js 点击按钮或者图片，实现图片上传并显示在页面上

js 点击按钮或者图片，实现图片上传并显示在页面上相关推荐

最新文章

热门文章