今天的码农女孩做了关于文件操作和文件拖拽的笔记 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都可以

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

今天的码农女孩做了关于svg画图和canvas画图 2022/1/18
svg和canvas画图 svg和canvas区别: svg:不依赖分辨率,不能嵌入图片和文字,不能通过事件操作,但是可以通过css执行动画,矢量图形,放大缩小不失真,渲染能力强,适合做图标,地图,动 ...
今天的码农女孩做了关于js的简答题
1.什么是闭包?有什么特点? 闭包是能够有权访问其他函数内部的私有变量的函数是指有权访问另一个函数的作用域中的变量的函数,可以提升变量优点:在页面加载时在内存中存在,调用速度快,并闭包的变量也会始 ...
今天的码农女孩做了关于解决跨域的笔记
处理跨域: 在项目根目录下定义一个vue.config.js文件在文件下定义代理的地址: module.exports={ devServer:{ proxy:{ ...
短视频系统源码，检测在手机上的触摸按下、拖拽、抬手
短视频系统源码,检测在手机上的触摸按下.拖拽.抬手 var touch_pos = Vector2.ZERO # 触摸位置 var lift_up_pos = Vector2.ZERO # 抬手位置 ...
为什么80%的码农都做不了架构师？
身为技术人,相信你也思考过这个问题:工作了几年,代码写得非常熟练,上线的程序也少有 bug ,时不时还能搞个技术分享,但接下来要往哪个方向发展呢? 想来无非是 3 种选择:专精技术.转型管理.晋升架构 ...
大龄码农适合做什么，比如40岁以上？
对于大龄码农,建议还是从事跟技术相关的工作,这样能有比较好的承接. 这个年龄进入体制内很难了(公务员超龄),可以考虑下面的一些方向: 1 兼职外包相比个人,接单平台有更成体系的获客渠道,通常需求也更 ...
做了20年的老码农-历数做过的系统
我毕业于2002年,算来已经从事软件开发20年了,期间开发过一些有意思的系统,给网友们分享下. 1)2000~2002年,FLASH动画展示.在校期间,用VC开发了Flash动画展示软件.我将大学学习 ...
码农不得不做的P图辨识能力
本文说一下Adobe小游戏:25张照片考验你的P图辨识能力,下面开始详细说一下. 面对一些难以置信的照片,很多人第一反应都是"这一定是 PS 的",然而这其中不乏真照片.当然 ...
今天的码农女孩学习了关于jQuery中的文档处理的内容
文档处理内添加(孩子) 1.append()在父类尾部添加孩子(新) 2.appendTo()在父类尾部添加孩子(指定) 3.prepend( ...

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

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

最新文章

热门文章