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

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

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

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

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

  2. fileReader接口方法

    方法参数描述
    readAsDataUrlfile将文件读取为DataURL
    readAsTextfile将文件读取为文本
  3.  fileReader接口事件

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

下面实现拖拽拉去图片

拖拽事件,采用的是html5中的dragdrop

 

实现拖拽的步骤:

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

 

首先我们设置一个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>	

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值