网站首页 > 技术文章正文

拖拽外部文件进行读取-FileReader

hmc789 2024-11-13 11:30:17 技术文章 3 ℃

1.文件读取

通过FileReader对象可以读取本地存储的文件, 使用File对象来指定所要读取的文件或数据。其中File对象可以是来自input元素上选择文件后返回的FileList对象, 也可以来自拖放操作生成的DataTransfer

(1) FileList对象

通过input元素上传文件后得到一个伪数组形式的FileList对象

(2)FileReader对象

HTML5新增的内建对象, 可以读取本地文件内容

实例对象：

var reader = new FileReader;

实例方法：

readAsDataURL() //以DataURL形式读取文件

事件监听：

onload //文件读取完成时调用

属性：

result //文件的读取结果

2.拖拽事件

在HTML5规范中, 可以通过为元素增加draggable='true'来设置此元素是否可进行拖拽操作, 其中图片、链接默认是开启的

事件监听：

ondrag 应用于拖拽元素, 整个拖拽过程都会调用

ondragstart 应用于拖拽元素, 当拖拽开始时调用

ondragend 应用于拖拽元素, 当拖拽结束时调用

ondragenter 应用于目标元素, 当拖拽元素进入时调用

ondragleave 应用于目标元素, 当鼠标离开目标元素时调用

ondragover 应用于目标元素, 当停留在目标元素上时调用

ondrop 应用于目标元素, 当在目标元素上松开鼠标时调用

3.实例

拖拽外部文件到当前页面进行解析

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box {

width: 400px;

height: 400px;

border: 1px solid #000;

margin: 100px auto;

box-shadow: 0 0 10px 5px rgba(0,0,0,.8);

border-radius: 10px;

line-height: 400px;

text-align: center;

font-size: 30px;

font-weight: 700;

text-shadow:0 0 5px;

transition:all 1s;

}

.box img {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<div class="box">拖拽外部文件至此</div>

// 需求：拖拽外部文件到当前页面进行解析

// 获取目标元素

var box = document.querySelector('.box');

// (1)需要解决一旦拖拽外部文件就覆盖掉当前页面的问题

// 解决：给document绑定drop事件

// drop事件默认触发不了，需要在dragover事件里面阻止默认事件

document.ondrop = function(e){

e.preventDefault();

}

// 这个阻止默认事件是为了让drop事件得以触发

document.ondragover = function(e){

e.preventDefault();

}

box.ondragenter = function(){

box.style.boxShadow = '0 0 10px 5px rgba(255,0,0,.8)';

}

box.ondrop = function(e){

// console.log(e);

// 得到拖拽过来的文件

var dataFile = e.dataTransfer.files[0];

// FileReader实例化

var fr = new FileReader();

// 异步读取文件

fr.readAsDataURL(dataFile);

// 读取完毕之后执行

fr.onload = function(){

// 获取得到的结果

var data = fr.result;

var img = document.createElement('img');

img.src = data;

box.innerHTML = '';

box.appendChild(img);

}

</script>

</body>

</html>

上一篇： JavaScript `FileReader` 接口提供的文件处理方法
下一篇： leaflet地图截图批量导出 leaflet 底图

网站首页 > 技术文章 正文

拖拽外部文件进行读取-FileReader

猜你喜欢

网站首页 > 技术文章正文