利用datatransfer拖拽实现多张图片预览

最新推荐文章于 2025-06-06 10:59:33 发布

GaHoOo

最新推荐文章于 2025-06-06 10:59:33 发布

阅读量809

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/GaHoOo/article/details/82702900

本文介绍了HTML5中的FileReader API如何简化图片预览的实现，通过设置draggable属性和处理dragover、drop事件，可以避免将图片上传到服务器就能实现本地图片预览。关键在于阻止默认事件，确保浏览器不会直接打开文件。

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

html5从一开始就给予开发者很多的期待，给开发者提供了众多新的API，不用像以前那样为了实现某个功能而写很多的代码。在以前，如果要实现图片的预览会怎么做呢，我上网科普得知了不少，鉴于安全的原因，web端的JS是不能直接读取文件的本地真是路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现基本的图片预览。

fileReader:现在html5提供的API不再让图片预览那么麻烦，FileReader提供了很多方法进行图片预览和文本读取，同时也提供了一整套完整的时间来捕获文件，它主要是用来把文件读入内存，并且读取文件中的数据。
fileReader接口方法：

方法参数描述
readAsDataUrl file 将文件读取为DataURL
readAsText file 将文件读取为文本
fileReader接口事件：

事件描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadstart 读取文成触发，无论成功或失败
onloadend 读取时触发
onprogress 读取时

下面实现拖拽拉去图片

拖拽事件，采用的是html5中的drag和drop。

实现拖拽的步骤：

把需要拖放的对象元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放。
编写与拖放有关的事件处理代码。

首先我们设置一个div为拖拽区域，告诉用户应该吧图片拖拽到什么位置，并设置div的样式

		<style>
			*{
				margin:0;
			}
			.result{
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body style="margin: 200px;">
		
		<div id="result" class="result">
			
		</div>
		<ul>
			 此处是图片预览的位置所在
		</ul>

然后我们给drag区域绑定上拖拽事件：

<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++) {  //此处是为了实现可以拖动多张图片而建立for循环
                    
			var reader = new FileReader() //使用fileReader的时候 必须使用new运算符创建新对象

			reader.readAsDataURL(fs[i])	 //调用readAsDaraUrl方法读取文件
		
			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)             //在li中添加该图片
						oUl.appendChild(oLi)              //在ul中添加该li
						obj[this.result] = this.result    
					}else{
				alert("不要重复提交")
          //运用if方法 避免重复提交相同照片，此处判断图片的是否重复是根据图片所在的位置，
          //当拖拽一张照片进入区域生成预览后存储该图片的数据，若相同即弹（“不要重复提交”）
		}					
						
	}
  }
				
}			
	</script>

方法	参数	描述
readAsDataUrl	file	将文件读取为DataURL
readAsText	file	将文件读取为文本

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadstart	读取文成触发，无论成功或失败
onloadend	读取时触发
onprogress	读取时

利用datatransfer拖拽实现多张图片预览

fileReader:现在html5提供的API不再让图片预览那么麻烦，FileReader提供了很多方法进行图片预览和文本读取，同时也提供了一整套完整的时间来捕获文件，它主要是用来把文件读入内存，并且读取文件中的数据。

fileReader接口方法：

fileReader接口事件：

下面实现拖拽拉去图片

这里有个需要注意的地方：需要给dragover和drop添加阻止默认事件，否则浏览器会采用file:///的方式打开文件。drop事件执行后就是进行checkFile()，后续的操作与使用input[type=file]的操作一样。

这里有个需要注意的地方：需要给dragover和drop添加阻止默认事件，否则浏览器会采用`file:///`的方式打开文件。drop事件执行后就是进行checkFile()，后续的操作与使用input[type=file]的操作一样。