原生JS实现element-ui文件拖拽上传效果[手把手教程]

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

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

移动进去是是不是跟element-ui很像?配色用的是跟他一样的

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

 样式的话自己写就行

3.第一步 点击盒子 弹出选择文件对话框对吧 ok继续写js

 con就是最外面的盒子 class='content'

 

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

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

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

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

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

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

 

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

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

 在调用fileChange_方法在进行追加对象,并保存对象到数组中

 

完成了