将外部文件拖拽到浏览器中预览

最新推荐文章于 2023-07-04 20:50:43 发布

Dreaming-fly

最新推荐文章于 2023-07-04 20:50:43 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 文件拖拽浏览器

本文链接：https://blog.youkuaiyun.com/qq_21561355/article/details/52206338

这篇博客介绍如何利用JavaScript实现将外部文件拖拽到浏览器中预览的功能。通过监听拖拽事件，读取文件内容，并根据文件类型如图片（JPEG）或其他文本类型进行不同的处理，最终在页面上展示预览内容。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="图片拖放/lib.js"></script>
</head>
<style>
#dropbox{
width:800px;
height: 100px;
background: papayawhip;
text-align: center;
font-size: 30px;
}
ul{
background: paleturquoise;
width:800px;
height: 500px;
}
ul li{
width: 200px;
height: 200px;
margin-top: 10px;
border: 2px dashed palevioletred;
list-style: none;
float: left;
overflow: hidden;
}
ul li img{
width: 300px;
height: 300px;
}
</style>
<body>

<div id="dropbox" draggable="true">将文件拖到此区域 </div>
<ul id="filecontent" draggable="true"></ul>
<script>
var dropbox = document.getElementById("dropbox");
//拖离
document.addEventListener("dragleave", function(e){
yc.stopEvent(e);
}, false);
//拖进
document.addEventListener("dragenter", function(e){
yc.stopEvent(e);
}, false);
//拖来拖去
document.addEventListener("dragover", function(e){
yc.stopEvent(e);
}, false);
//拖后放
document.addEventListener("drop", function(e){
yc.stopEvent(e);
}, false);


var box = document.getElementById('dropbox'); //拖拽区域
box.addEventListener("drop",function(e){
yc.stopEvent(e); //取消默认浏览器拖拽效果
var files = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(files.length == 0){return false;}

for(var i=0;i<files.length;i++){
if(files){
//实例化FileReader()对象 readAsText readAsBineryString readAsArrayBuffer
var reader=new FileReader();
//alert(files[i].type);
switch(files[i].type){
case "text/plain":
reader.readAsText(files[i]);
break;
case "BineryString":
reader.readAsBineryString(files[i]);
break;
case "ArrayBuffer":
reader.readAsArrayBuffer(files[i]);
break;
case "image/jpeg":
reader.readAsDataURL(files[i]);
break;
}
}
//存放选择的文件
reader.onload=function(){
var result=this.result;
if((files[0].type)== ("image/jpeg") ){
var filecontent=document.getElementById("filecontent");
var li=document.createElement("li");
li.innerHTML+="<img src='"+result+"' />";
filecontent.appendChild(li);
}else{
var filecontent=document.getElementById("filecontent");
var li=document.createElement("li");
li.innerHTML+=result;
filecontent.appendChild(li);
}
}
}
},false);


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