JS竟然可以读取文件?#web前端 js读取文件和写入文件

这个视频来说一下js的文件读取。刚好有同学问到，首先要说一点，对文件进行读写、增删、改查一系列的操作是涉及到用户隐私安全的。用前端语言，比方JS是不可能完全做到的。要不然写一个网页，访问了就可以在本地电脑上面随便新增文件，或者把电脑里面的东西全部给干了或者改了，都是一件很恐怖的事情。

可以实现文件操作的语言，比方nodejs，一些后端语言，PHP、JAVA这些。这个时候要分清楚是操作哪里的文件，是客户端还是服务器端。如果要操作客户端的，都要获取相应的权限。比方手机端的应用都会向我们拿权限。很多时候不给文件访问的权限，比方图库，连相册访问都访问不了，不用增删、改查了，这些先不管它了。

JS的文件读取，简单的文件读取还是可以实现的。但是同样，这里要读取的是本地的文件，其实也需要用户给予权限。这里要怎么做？就需要配合一个input的控件，让用户自己来操作。这里提供了一个按钮，只有用户主动去选择了，这个行为是用户触发的。换言之就是得到了用户的允许才会对文件进行读取，不会JS自动触发、自动读取，那就不安全了。

来看一下具体怎么操作。要对input添加一个onchange事件，然后执行一个函数a1s，把事件对象传进去，然后来写这个函数。这里需要用到一个fileReader类，先把对象实例化出来。可以先把事件对象打印出来看一下。先把控制台打开，然后来选择文件。这里选择a.txt文件，事件对象打印出来了，展开来看一下。

里面有个target，target下面还有一个叫files，这一个下标为0的，files里面下标为0的，放的就是刚才选择的文件a.txt，所以就要读取用户选择的文件。这里是可以读取成好几种格式的，就把它读成文本。

·要读取什么？就是刚才给大家展开来看的target下面files的第0个，就是刚才选择的文件a.txt，这个文件里面就随便输入一句话，看一下等一下可不可以把它读取出来。这个过程是异步的，要先等它读取。

·这里面还是先把事件对象打出来看一下，同样是选择刚才那个文件，再展开来看一下，同样找到target，它里面有一个result，大家看到没有，result里面保存的就是读取的文件里面的内容，这样就可以读取到文件的内容了。

·比方这里直接把读取到的内容输出来，没有问题，这个内容获取到了。当然除了读这种txt的文本，读个json，甚至读个图片也可以，就来读个图片试一下。读图片这里就不是读成text，读成base64。

·这次就来选择一张图片，这里就把读取到的结果输出来了，可以复制一下，这个是base64，可以把刚才复制的那一串在地址栏里面回车，这张图片就出来了，是可以读取到这张图片的。

·可以用读取到的图片做一些预览图之类的，这个图片有点大，给它改小一点。JS获取到img，然后设置一下它的src，把result赋值给它。

·现在还没有预览图，可以手动来选择一张，这里随便选择一张图片，这个图片就读取到了，然后换一张图片也可以，另外再选择另外一张，都是可以正常读取的。

这个视频就简单给大家说了一下JS的文件读取，感谢大家的收看。