原生js 实现图片上传功能

weixin_43834364

于 2019-09-05 11:50:14 发布

阅读量591

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/weixin_43834364/article/details/100555268

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现图片上传并实时预览的功能，包括限制图片大小不超过1.5MB，调整预览图片尺寸，适用于网页前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>原生JS图片上传</title>
	</head>
	<body>
	<div>
	    <input type="file" id="uploadimg">
	    <div id="upload"></div>
	</div>
	</body>
	</html>
	<script>
	    document.getElementById('uploadimg').addEventListener('change',function (e) {
	        var files=this.files;
	        var img=new Image();
	        var reader=new FileReader();
	        var box=document.getElementById('upload')
	        reader.readAsDataURL(files[0]);
	        reader.onload=function (e) {
	            var mb=(e.total/1024)/1024;
	            if(mb>1.5){
	                alert('图片大小不能大于1.5M');
	                return
	            }
	            img.src=this.result;
	            img.style.width='80%';
	            box.style.width='200px;'
	            box.style.height='200px';
	            box.innerHTML='';
	            box.append(img);
	        }
	    })
	</script>