纯js脚本上传文件至服务器

授权转载，原文地址：https://www.slvit.com/zdlDetail?id=13

一、原理

使用FileReader的readAsDataURL方法将文件进行base64编码，编码结束后将base64后的数据上传至服务器。

二、开发工具和参数配置

工具notepad++；

三、测试通过的运行环境（如操作系统版本）

支持的浏览器chrome,ie,safri,firefox

四、难点

先上代码

重点1、onloadend

    通过FileReader的onloadend文件转码结束的事件来获取最终转成base64格式的数据，这样之后呢，你使用的<input type=file />选中的文件x.zip就被filereader读到内存，此后就可以在内存里看到文件的base64数据了，有了文件内容，下一步就可以上传了。

重点2、saveUpFile()调用时机

从函数名上就可以得知，在你选择好文件后，任意时间点都可以调用。或者这样讲，你使用<input type=file />选择的文件，在内存中，文件对象只有一个文件名你可以使用。而你不能将文件名传到服务器上去，那样做是无意义的。所以选择文件只是完成上传文件中三步中的第一步，之后你需要将选择的文件读到内存，最后上传。