js实现本地图片拖拽到浏览器

• 将本地图片拖拽到浏览器其实非常简单,主要涉及到的是使用FileReader和html的拖拽事件

• FileReader中我们主要使用到的是onload事件和readAsDataURL()方法,onload事件主要是用来处理加载的事件,事件会在读取操作完成后触发,readAsDataURL()方法主要是用来读取拖拽的图片信息,在读取完成后内部result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

直接上代码

	//先获取要存放图片的div
	var box = document.getElementById('box')
	//阻止div的默认元素使其可以存放拖拽过来的图片
	//这时候要用到拖拽事件中的ondragover
	box.ondragover = function(e) {
		ev = window.event || e
		ev.preventDefault()
	}
	//使用ondrop事件源对象拖动着在目标对象上方释放/松手是触发
	box.ondrop = function(e) {
	ev = window.event || e
	//这里也要阻止默认事件因为图片拖拽到浏览器默认会打开个新窗口显示图片
	ev.preventDefault()
	//读取拖拽的图片
	let fr = new FileReader()
	//用dataTransfer获取拖拽的图片
	fr.readAsDataURL(ev.dataTransfer.files[0])
	//添加事件
	fr.load = function() {
		let img = document.createElement("img")
		//添加图片路径
		img.src = this.result
		box.appendChild(img)
		}
	}
	

然后直接把图片拖到浏览器就可以了