h5文件处理与拖拽

fillReader方法  abort()终止读取  readAsBinaryString(file) 将文件读取为二进制编码

readAsDataURL(file) 将文件读取为DataURL编码 readAsText(file) 将文件读取为文本

readAsArrayBuffer(file) 将文件读取为arraybuffer

fillReader 事件

onloadstart 读取开始时触发 onprogerss 文件在读取中  onloadedend 读取完成触发，无论成功或者时失败

onload 文件读取完成并且成功时触发  onabort 中断时触发  onerror 出错时触发

下面有一个实际的例子用于来实现文件上传，这上传的方式是结合了h5特有的拖拽事件相结合而写的。主要的就是通过拖拽将文件放入到目标框中然后即可完成拖拽。

接下来就是来介绍h5中的拖拽，在之前我们也介绍过拖拽，之前所说的拖拽是通过js来实现的其主要是通过改变dom的位置而实现的。而在h5中的拖拽，当你拖拽此元素时，会有一个相当于分身的物块被你拖拽，在原位置的物体并没有移动，当松开鼠标后这个分身的物体要回到原来的物体上。对于h5的拖拽触发的方式是通过draggble属性，将其的属性值设置为true即可触发。关于拖拽的相关事件如下：

拖拽相关事件

dragstart 被拖拽元素开始时被触发  dragend 被拖拽元素结束时触发即鼠标松开时

dragenter 目标元素(此事件是绑定在目标元素上的) 拖拽元素进入目标元素时被触发

dragover 目标元素 拖拽元素在目标元素上移动时触发 drop 目标元素  被拖拽元素在目标元素上时同时松开鼠标后才会被触发

注意需要阻止默认dargover的默认事件之后才会触发该事件

下面就是去触发这几个方法的实例例子：

在上面事件的触发过程中，只需要注意的就是事件触发时间的先后。以及事件在何种情况下可以被触发。下面介绍的就是用h5的拖拽所写的一个实例，其功能是当你去拖动上面带有数字的物体就可以实现新的顺序，当移动上面带有数字的物体到黑色边框中，这个物体就会被删除具体的效果图如下：

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分