文章目录js的上传，文章目录前言1、js实现拖动功能(将文件拖动到指定位置) 2、使用文件读取对象(关于如何读取文件内容) 1、测试在步骤：确定所传递的文件是否是图像格式(在步骤：创建new FileRead ) )示出在页面上，然后， 获取创建的对象并调用readasdataurl(f )方法4 .步骤： new FileRead )对象的onload方法，然后在e.target.result :中调用当前图像的base64
前言这次实现的功能，通过变更事件属性：也可以变更为点击上传文件(！ ）
不用说，我直接坐代码！
另一方面，js实现拖动功能(将文件拖动到指定位置) (div.addeventlistener )、denter )；
div.addevent listener (‘dragover’，dover )；
div.addevent listener (‘drop’，dp ) )。
三个事件分别绑定到： 1。 拖动文件进入div 2。 拖动文件，然后在div上释放3 .鼠标按钮
divclass=' box '/divscriptletdiv=document.query selector '.box '； div.addevent listener (' drag enter '，denter )； div.addeventlistener('dragover '，dover )； div.addeventlistener(drop )，dp ) function denter(e ) e ) { e.preventDefault； }功能驱动器(e ) { e.preventDefault )； }functionDP(e ) { e.stopPropagation )； //阻止事件鼓泡的e.preventDefault (； //阻止默认事件(上面的相同)//调用拖动的文件var file=e.dataTransfer.files //函数传递和分析文件内容并将其转换为bas64格式的hand (} /脚本、 FileRead (文件读取) (使用对象)1.遍历在第一步骤：传递的file 2) 2.2确定在第二步骤：传递的文件是否是图像格式创建对象，然后获取所创建的对象并调用readasdataurl(f )方法4 .步骤： new FileRead )对象中的onload方法，并返回e.target.reread
functionhandfiles (文件) for ) letindex=0； 索引文件. length； 索引({ varf=file [ index ]； //图像var imageType=/^image/if (！ imagetype.test(f.type ) ) { continue }； //创建图像varim=document.createelement (' img )； /*im.classlist.add('obj )； //div.appendchild(im； //读取文件对象的var reader=new FileReader (； //从读取文件对象reader开始读取内容，读取成功后，在result属性中获取base64字符串//读取文件是异步进程reader.readasdataurl(f ) //其中，一个即时执行函数(已解决的问题是变量作用域问题)直接指向reader.onload=function(aimg )//src//im.src=e.target.resultreturnction 解决方案：使用闭包函数解决使用即时执行函数用es6的let声明所有变量。