选择图片未经后端显示预览图片

效果：

未上传图片前

上传图片后

-html代码部分

<body><form><img id="imga" src="data:image/2518e93.png" /><input type="button" id="buta" value="上传头像"><input id="inputa" type="file" name="file" />         </form>
</body>

css代码部分：

将上传文件按钮和普通按钮都设置定位，上传文件按钮的样式写在后面，这样层级会比普通按钮高，会覆盖在普通按钮上面。

 <style>form {margin: 100px;}.buta {position: relative;left: 0px;top: -85px;height: 30px;width: 70px;}#inputa {position: relative;width: 200px;opacity: 0;/* 最关键的地方  把input设置成透明，这样只能看到按钮 */cursor: pointer;left: -75px;top: -85px;}img {width: 200px;height: 200px;margin-left: 50px;}</style>

js代码

// 获取图片，文件上传，按钮的dom对象
var imga=document.getElementById("imga");
var buta=document.getElementById("buta");
var inputa=document.getElementById("inputa");
/ 选择图片未经后端显示预览图片
inputa.onchange=function(event){// 根据这个 <input> 获取文件的 HTML5 js 对象
var files = event.target.filesif (files && files.length > 0) {// 获取目前上传的文件file = files[0];console.log(file);// 来在控制台看看到底这个对象是什么// 那么我们可以做一下诸如文件大小校验的动作if(file.size > 1024 * 1024 * 2) {alert('图片大小不能超过 2MB!');return false;}// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL// 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; var imgURL = URL.createObjectURL(file);// 用这个 URL 产生一个 <img> 将其显示出来console.log(imgURL);imga.src=imgURL;// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了// URL.revokeObjectURL(imgURL);}
}

选择图片未经后端显示预览图片相关推荐

element表格里面放图片_elementUI 表格中预览图片
表格中有一列显示的图片,现需要点击图片,预览该图片,使用的elementui中的previewSrcList做的图片预览, 但是测试发现,无论点击表格中的那张图片,预览的大图都是从第一张图片,开始预览 ...
viewer动态加载图片第一次点击预览图片失败的问题
如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了. 众所周知,每一个插件都有很多坑,比如说市面上比较火爆的图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小 ...
Win10文件夹中图片不显示预览图解决方法
Win10文件夹中图片不显示预览图解决方法分享.如果我们在文件夹里面有很多的图片文件,可以通过预览图来快速的找到自己需要的图片.但是有用户却发现电脑文件夹里面图片不会显示缩略图,今天我们一起来看看如何 ...
JQ input 文件上传并预览选择图片后,在页面上预览图片,页面渲染
有时候,我们更新界面信息时会遇到,选择图片后,并不能预览图片,必须提交数据库后才能在页面上显示出来,这样我们该怎样办呢? 起始jq为我们提供了两个方法change()和URL.createObject ...
微信小程序wx.previewImage预览图片
小功能点击图片放大预览这个也是小程序开发中经常遇到的小功能,所以也单独拿出来做一下总结,其实就是一个小知识点. 文档链接 :https://developers.weixin.qq.com/min ...
html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表
点击图片,实现预览图片功能,并且可循环预览图片列表! image.png 一.多张图片预览 html代码 js代码 data(){ return { photos:[ { src: '图片路径1'}, ...
uniapp 上传图片＋预览图片 + 删除图片
图片是用的阿里巴巴矢量图. <template> // html部分<view class="goods-box"><view class=" ...
elementui el-image组件点击按钮预览图片
今天遇到一个新的需求,点击按钮查看图片,且图片能放大缩小.如下图: 想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__p ...
elementui 点击按钮（文字）预览图片
今天遇到一个新的需求,点击按钮查看图片,且图片能放大缩小.如下图: 想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__p ...
点击预览与按钮预览图片
想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__preview"><el-image style ...

选择图片未经后端显示预览图片

选择图片未经后端显示预览图片相关推荐

最新文章

热门文章