【利用datatransfer实现多张图片预览】

最新推荐文章于 2021-03-02 16:58:36 发布

wang拾柒

最新推荐文章于 2021-03-02 16:58:36 发布

阅读量239

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42160554/article/details/82663791

版权

本文介绍了一种使用HTML5的drag and drop API及FileReader API实现的多张图片拖拽上传并实时预览的方法。通过监听div元素的dragenter、dragover和drop事件，实现了文件的拖放交互，并通过FileReader读取文件内容显示为图片。

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

<html>
	<head>
		<meta charset="UTF-8">
		<title>利用datatransfer实现多张图片预览</title>
		<style>
			*{
				margin:0;
			}
			.result{
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body style="margin: 200px;">
		
		<div id="result" class="result">
			
		</div>
		<ul>
			
		</ul>
		<script>
			var oRes = document.getElementById("result")
			var oUl = document.getElementsByTagName("ul")[0]
			var obj = {}
			
			oRes.ondragenter = function(){
				this.innerHTML = "可以放"
			}
			
			oRes.ondragover = function(e){
				e.preventDefault()
			}
			
			oRes.ondrop = function(e){
				e.preventDefault()
				var fs = e.dataTransfer.files
				
				for (var i=0;i<fs.length;i++) {
					var reader = new FileReader()
					reader.readAsDataURL(fs[i])   //多张图片用i   一张用0
					
					reader.onload = function(){
						
						if(!obj[this.result]){   
							var oLi = document.createElement("li")
							var oImg = document.createElement("img")
							oImg.src = this.result
							oImg.width = 100
							oImg.height = 100
							oLi.appendChild(oImg)
							oUl.appendChild(oLi)
							obj[this.result] = this.result
						}else{
							alert("不要重复提交")
						}
					}
				}
			}
			
			

		</script>
	</body>
</html>