html 上传图片，本页预览

weixin_33842328

于 2017-11-12 15:15:00 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/485188

本文介绍了一种使用HTML和JavaScript实现的图片上传实时预览功能。通过FileReader API读取用户选择的图片文件，并将其显示在页面上。适用于网页表单中需要即时查看图片效果的场景。

直接上代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片上传预览</title><script type="text/javascript"> function imgPreview(fileDom){ //判断是否支持FileReader if (window.FileReader) { var reader = new FileReader(); } else { alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！"); } //获取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是图片 if (!imageType.test(file.type)) { alert("请选择图片！"); return; } //读取完成 reader.onload = function(e) { //获取图片dom var img = document.getElementById("preview"); //图片路径设置为读取的图片 img.src = e.target.result; }; reader.readAsDataURL(file); }</script></head><body> <img id="preview" /> <br /> <input type="file" name="file" onchange="imgPreview(this)" /></body></html>