DOMString-URL或base64展示图片（拖拉和获取 --多选）_domstring格式的url图片数据-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42781818/article/details/103631489

本文介绍了一个利用HTML5的拖放API和FileReader API实现的图片上传功能，支持多选和拖拽上传图片，并使用base64编码在页面上预览图片。

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

DOMString-URL或base64展示图片（拖拉和获取 --多选）

直接上代码

<title>OSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
	#box{
		width:500px;
		height:500px;
		background-color: #cccccc;
	}
	#box img{
		widht: 150px;
		height: 150px;
	}
</style>

<div id="box">
	<h1>施主,请往里拖图片~</h1>
</div>
<input type="file" id="file"  multiple />
<script type="text/javascript">
	window.onload = function(){
		let inputElement = document.getElementById("file");
		let dropbox = document.getElementById("box");
		inputElement.addEventListener("change", handleFiles , false);
		function handleFiles(fileList, isbox = true) {
			if(isbox){
				fileList = fileList.target.files;
			}
			console.log(fileList);
		    for (let i = 0; i < fileList.length; i++) {
			    let  img = document.createElement("img"); //let作用域问题很重要
				dropbox.appendChild(img);
			    /*img.src = window.URL.createObjectURL(fileList[i]); //DOMstring-URL
			    img.onload = function(){
				    window.URL.revokeObjectURL(this.src);
			    }*/
			    var reader = new FileReader();
				reader.onload = function(e){
					img.src = e.target.result; //base64
				}
				reader.readAsDataURL(fileList[i]);
			}
		}
		dropbox.addEventListener("dragenter",function(e){
			e.stopPropagation();
			e.preventDefault();
		},false);
		dropbox.addEventListener("dragover", function(e){
			e.stopPropagation();
			e.preventDefault();
		}, false);
		dropbox.addEventListener("drop", function(e){
			e.stopPropagation();
			e.preventDefault();
			var dt = e.dataTransfer;
			var files = dt.files;
			handleFiles(files,false);
		}, false);
	}
</script>