JS获取本地文件的方式

忘是亡心i 2022-06-03 08:37 1886阅读 0赞

通过js来获取文件的方式，记录两种方法：  
第一种，通过input获取：  
html:

其中multiple表示可以同时选中多文件  
JS:

解释：给input 注册一个onchange方法，当点击input的时候就会调用这个方法，选择文件以后就会返回一个对象，通过e.currentTarget.files就可以获取到选择的文件，该files是一个数组，里面保存着文件数据，如果是一个文件，则通过e.currentTarget.files\[0\]来获取即可，如果是多个文件，则遍历该数组即可。备注：如果input没有配置multiple属性，则只能选择一个文件。

第二种方法：拖拽文件的方式  
通过拖拽的方式获取文件，主要调用了ondragover、ondragenter、ondragleave 、ondrop这四个事件，其中最后是在ondrop这个事件中获取文件，除此之外，要设置保存文件的方式为copy，不然获取回来的文件会是0字节的。

放一个div用来作为获取文件的区域，也可以直接用body  
html:

JS:

e.stopPropagation();、e.preventDefault();这两个方法主要是用来取消默认事件的，不然浏览器则会认为是默认事件，把拖进来的文件交给浏览器处理。  
最后在ondrop方法中，通过e.dataTransfer.files，方式获取拖进来 的文件，files和前面的一样，也是一个数组，获取方式和上边input 的方式一样，遍历数组即可。e.dataTransfer.dropEffect = ‘copy’;该方法是设置文件保存的方式为复制。