今天的码农女孩做了关于文件操作和文件拖拽的笔记 2022/1/21

文件操作和文件拖拽
文件操作：
js有两种机制：一个是事件机制，一个是io机制
文件操作对象：
Blob通过二进制数据读取
file读取单个文件对象
fileList读取多个文件对象
fileReader把文件按字节读取
file和fileList的方法：
name 获得文件名称
size 获得字节大小
type 获得文件类型
lastModifiedDate 最后修改日期
单文件上传：
    <input type="file" class="file">
    <button class="btn">获取</button>
    <h1 class="font"></h1>
    <script>
        var btn=document.querySelector(".btn")
        btn.οnclick=function(){
            var file=document.querySelector(".file").files[0]
            var h1=document.querySelector(".font")
            h1.innerHTML="文件名称："+file.name+"<br>"+
            "自己长度："+file.size+"<br>"+
            "最后修改日期："+file.lastModifiedDate+"<br>"+
            "文件类型："+file.type+"<br>" 
                          
        }
    </script>
多文件上传：
    <input type="file" class="file" multiple>
    <button class="btn">获取</button>
    <h1 class="font"></h1>
    <script>
        var btn=document.querySelector(".btn")
        btn.οnclick=function(){
            var file=document.querySelector(".file").files
            var name=""
            for(var i=0;i<file.length;i++){
                name+=files[i].name+","
            }
            document.querySelector(".font").innerHTML=name
        }
    </script>
fileReader
事件操作
onloadstart获取文件时触发
onprogress读取文件过程中触发
onload读取文件成功完成时触发
onabort读取文件中断时触发
onerror读取文件错误触发
onloadend读取文件完成时触发（无论成功与否）
属性和方法
readAsBinsryString(file)以二进制形式读取
readAsText(file,字符集)以某种字符编码去读
readAsDataURL()以字符串形式读取文件，保存的是对象类型，可以获得对象
result获取读取处理对象的信息
loaded获取当前文件的字节数
abort()中断读取数据
slice(开始，步长)分段读取
mozslice()处理兼容性，添加浏览器前缀
文件拖拽：
<img draggable="true">设置文件可拖拽
DataTransfer拖拽对象
事件操作
ondragstart鼠标放在拖拽元素上开始触发
ondragenter拖拽元素进入目标元素触发
ondragover拖拽元素在目标元素上移动进行触发
ondrop拖拽元素进入目标元素，并且属性松开时触发
ondragend拖拽元素完成拖拽后进行触发
属性和方法
getData()获得数据
setData(url/text,对象/文本)设置文本或标签内容
preventDefault()启动元素放置事件
dropEffect被拖动的元素权限设置
    none 不能将元素放在目标元素上
    move可以移动元素在目标元素上
    copy将拖拽元素进行复制
    link打开拖动元素的地址
effectAllowed允许拖动的效果
   none被拖拽的元素不能有任何行为
   copy只允许复制
   move只允许移动
   link只打开链接
   copyLink允许复制和打开链接
   linkMove允许打开链接和移动
   copyMove允许复制和移动
   all都可以