前言:闲来无事,突然想到自己写一个手动拖拽上传文件效果,于是就创建一个html准备手搓一个上传组件

1.准备一个html,写好结构,怎么写都可以,写好样式最终初始效果是这样

2.写脚本,首先思路是,这是一个大盒子,里面必须要包含一个input类型是 type:file 的标签,并且隐藏掉

3.点击盒子 弹出选择文件对话框对吧 ok继续写js con就是最外面的盒子 class='content'

我们模拟了用户鼠标点击input去选择文件

4.用户选择文件后如何获取文件,继续给input元素添加change事件获取文件

获取到文件之后还得展示,提前写好样式,追加div与span标签效果是这样的

5.基本文件选择功能完成,但是还有一个拖拽是如何完成的呢?

主要用到两个事件 ondragover:选择文件后移动到目标对象上就会触发

这里会有两个事件配合,默认文件拖拽放开后会自动打开文件,这个事件必须要阻止默认事件,不然后面的事件不会触发(自行尝试)

6.最后只要捕捉到用户在拖拽时目标身上放开触发事件就行

事件:ondrop 在目标对象拖拽时松开时触发,event对象是DataTransfer