FileReader
官方概念:FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
FileReader通过异步的方式读取文件内容,结果均是通过事件回调获取。
文本预览案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="file">
<h1>文件预览</h1>
<div id="content"></div>
<script>
let reader=new FileReader();//FileReader对象是用来读取文件的
let file=document.querySelector('#file');
let content=document.querySelector('#content');
file.onchange=function(ev){
// console.log(ev.target.files[0]);
reader.readAsText(ev.target.files[0]);
//文件的读写都是需要时间的
reader.onload=function(ev){//文件读取结束获得数据
// console.log(ev.target.result);
content.innerHTML=ev.target.result;
}
}
</script>
</body>
</html>
readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
这个方法是异步的,也就是说,只有当执行完成后才能够查看到结果,如果直接查看是无结果的,并返回undefined
也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果
当转化完成后, readyState 这个参数就会转换 为 done 即完成态, event(“loadend”) 挂载的事件会被触发,并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果
FileReader.readyState 有三种状态码
| 常量名 | 值| 描述 |
| EMPTY | 0| 还没有加载任何数据. |
| LOADING | 1| 数据正在被加载. |
| DONE | 2| 已完成全部的读取请求. |
图片预览案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="file" id="file">
<div id="showimg"></div>
<script>
$(function(){
var reader=new FileReader();
$('#file').on('change',function(ev){
reader.readAsDataURL(ev.target.files[0]);
reader.onload=function(){
// console.log(reader.result);//reader.result是图片的路径
$('#showimg').append('<img src="'+reader.result+'"></img>');
}
})
})
</script>
</body>
</html>
readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。
拖放事件
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
外部拖放图片至选定框案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box {
width: 500px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 200px;
border: 5px dashed darkcyan;
user-select: none;
}
#showimg {
width: 500px;
margin: 0 auto;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="box">
请将图片拖动到此处
</div>
<div id="showimg"></div>
<script>
$(function(){
//dragover事件 会在拖拽源元素的鼠标指针在目标元素内移动时持续触发
$(document).on('dragover',function(ev){
ev.preventDefault();
})
//drop 放置事件
$('#box').on('drop',function(ev){
//注意:浏览器存在默认行为;当图片拖拽放置至指定框内,浏览器会跳转至图片页面
ev.preventDefault();
//jquery对event进行了二次封装,需要找到原生事件 originalEvent
// console.log(ev.originalEvent.dataTransfer.files);
let files=ev.originalEvent.dataTransfer.files;
let reader=new FileReader();
reader.readAsDataURL(files[0]);
reader.onload=function(){
$('#showimg').append('<img src="'+reader.result+'"></img>');
}
})
})
</script>
</body>
</html>
注意:
浏览器存在默认行为;当图片拖拽放置至指定框内,浏览器会跳转至图片页面。
jquery对event进行了二次封装,需要找到原生事件 originalEvent。
页面内部拖拽图片案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 500px;
height: 500px;
border: 1px solid black;
float: left;
overflow: hidden;
}
img {
width: 200px;
float: left;
}
</style>
</head>
<body>
<div id="box"></div>
<img src="./a.png" id="pic">
<script>
window.onload=function(){
let box=document.querySelector('#box');
let pic=document.querySelector('#pic');
pic.ondragstart=function(ev){
// console.log(ev.dataTransfer);
//设置了一个id
ev.dataTransfer.setData('id',ev.target.id);
}
box.ondrop=function(ev){
//获取了一个id,通过document.getElementById选择到这个元素,再将这个元素放入box里
ev.target.appendChild(document.getElementById(ev.dataTransfer.getData('id')));
}
box.ondragover=function(ev){
ev.preventDefault();//阻止默认行为
}
}
</script>
</body>
</html>
从边框外拖放至边框内
Dragable(拖拽属性)是H5新增的全局属性,是布尔类型;
图片默认的dragable属性为true,可拖拽的