简单实现前端选择上传图片并显示略缩图

效果

实现代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>修改信息</title><script>/*** 显示选择上传的图片略缩图* 当选择了图片文件时触发这个方法*/function previewFile() {// 通过标签选择器获取HTML元素var preview = document.querySelector('img');var file = document.querySelector('input[type=file]').files[0];// Js内置文件流var reader = new FileReader();// 更新img标签的src属性为图片的本地路径，就可以显示了reader.onloadend = function () {preview.src = reader.result;}// 图片文件不空就显示if (file) {reader.readAsDataURL(file);} else {// 图片文件是空的preview.src = "";}}</script>
</head>
<body><h2>修改个人信息</h2><form action="/shop/updateUserinfo" enctype="multipart/form-data" method="post"><table><tr><td>昵称：</td><td><input type="text" name="username"/></td></tr><tr><td>收货手机号:</td><td><input type="text" name="contactPhone"/></td></tr><tr><td>收货地址:</td><td><input type="text" name="contactAddress"/></td></tr><tr><td>请选择头像:</td><td><input type="file" name="image" onchange="previewFile()"/></td></tr><tr><img src="" height="100" width="200" alt="这是略缩图..."/></tr><tr><td><input type="submit" name="submit" value="提交"/></td><td><input type="reset" name="reset" value="重置"/></td></tr></table></form>
</body>
</html>

思路和实现都比较简单，即当选择了图片文件时自动触发JS方法修改处理<img>标签的src即可

简单实现前端选择上传图片并显示略缩图相关推荐

catia装服务器不显示不出来,CATIAV5无法显示略缩图怎么办？CATIAV5无法显示略缩图的原因分析和解决方案...
CATIAV5是一款十分实用专业的3D建模设计软件,我们在使用这款软件的过程中经常会遇到无法显示略缩图,这是什么原因呢?又要怎么解决呢?下面小编就带着大家一起学习一下吧! CATIA 无法显示缩略图主 ...
自绘列表框控件显示略缩图----再稍微改进点点。。
原先贴在QQ空间,汗!! http://user.qzone.qq.com/382164370/infocenter#!app=2&pos=1334911186 http://user.qzo ...
Solidworks 无法显示略缩图解决办法
1.将如下两个文件: X:\Program Files\Common Files\SolidWorks Shared\sldwinshellextu.dll X:\Program Files\Soli ...
对以前的改进MFC略缩图控件改进
以前写了一篇日记, 显示略缩图,见 <自绘列表框控件显示略缩图----再稍微改进点点..> http://blog.csdn.net/hemmingway/article/details/ ...
WordPress如图略缩图不显示问题
WordPress如图略缩图不显示问题如图配置好WordPress之后访问之后部分页面一直显示400 经过排查可能是因为大多数wordpress站长都已经选择了成熟的阿里云虚拟主题的原故,已经很少 ...
Android开发之--读取文件夹下图片生成略缩图并点击显示大图
这是一个简单的Demo,目的是:读取文件夹下图片生成略缩图并点击显示大图. 先新建一个工程,创建一个ThumbnailsWindows的类,继承LinearLayout.代码如下: package o ...
java 二进制图片上传_Spring MVC上传图片，Java二进制图片写入数据库，生成略缩图...
背景描述:最近做到一个项目,有个商品登记功能.登记的信息包括:基本信息若干(文字信息):图片信息,要求将图片保存到数据表中的image字段(sql server 数据库) 步骤:1.将图片上传到服务器 ...
android中实现ImageView中显示视频的略缩图
在Android中,我们有时候需要给视频文件添加一个缩略图. 据说ImageLoader和Glide等框架能实现这个功能,但是我尝试了下都没有成功. 有使用成功的请指导我下 XD 那么我们何必要借 ...
python openslide 查看并保存切片的略缩图，并将Image图片转换成Base64
说明项目有个需求,需要显示病理切片的略缩图,查了一下api,实现代码挺简单的. 代码: 1,保存为本地图片 import openslide#切片路径 img_path = "./slic ...

简单实现前端选择上传图片并显示略缩图

效果

实现代码

简单实现前端选择上传图片并显示略缩图相关推荐

最新文章

热门文章