网站首页 > 技术文章正文

拖拽外部文件进行读取——FileReader对象

hmc789 2024-11-13 11:29:05 技术文章 1 ℃

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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽外部文件</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>
<script type="text/javascript">
// 需求：拖拽外部文件到当前页面进行解析
// 获取目标元素
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>

上一篇：前端文件上传与下载前端文件上传
下一篇：用H5中的Canvas等技术制作海报 h5怎么制作海报

网站首页 > 技术文章 正文

拖拽外部文件进行读取——FileReader对象

猜你喜欢

网站首页 > 技术文章正文