图片上传以及允许连续上传同一图片

最新推荐文章于 2020-09-02 14:49:21 发布

su的前端之路

最新推荐文章于 2020-09-02 14:49:21 发布

阅读量1k

点赞数 1

分类专栏： javascript 文章标签： input file 上传文件

本文链接：https://blog.csdn.net/qq_38563845/article/details/78324837

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

实现的功能：

1.限制上传的文件只能为图片

2.限制上传图片的大小

3.允许连续上传同一图片

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上传图片</title>
	<style type="text/css">
		img{
			height: 150px;
			max-width: 300px
		}
	</style>
</head>
<body>
	<!-- multiple属性:允许一次上传多个文件 -->
	<input id="upload" type="file" name="" multiple="">
	<div id="img-div"></div>
	<script type="text/javascript">
		var dom = document.getElementById('upload')
		dom.onchange = function(event){
			//获取元素节点
			var target = event.target || event.srcElement;
			console.log(target.files)
			for( var i = 0; i < target.files.length; i ++ ){
		        var file = target.files[i];
		        if( !/image\/\w+/.test(file.type) ){
		            alert('文件必须为图片！')
		            return
		        }else if( file.size > 2097152 ){
		            alert('上传图片请小于2M')
		            return
		        }
		        var reader = new FileReader();
		        reader.onload = function() {
		        	//获取元素节点
		        	var imgDom = document.getElementById('img-div');
		        	imgDom.innerHTML += '<img class="showPic" src=' + this.result + '>'
		            //防止两次上传同一文件无法触发onchange事件
		            //假设第一次上传的文件是1.png，第二次又想上传这张图片，如果缺少这句代码，则第二次无法触发onchange事件
		            event.target.value=''
		        }
		        reader.readAsDataURL(file)
		    }
		}
	</script>
</body>
</html>

su的前端之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传以及允许连续上传同一图片

实现的功能：1.限制上传的文件只能为图片2.限制上传图片的大小3.允许连续上传同一图片代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传图片</title> <style type="...
复制链接

扫一扫