JS获取本地文件的方式

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

    <input type="file" id="files" multiple="multiple" >

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

<script>
window.onload=function(){
    var getFile =document.getElementById("files");
    getFile.onchange=function(e){
        //获取到文件以后就会返回一个对象，通过这个对象即可获取文件
        console.log(e.currentTarget.files);//所有文件，返回的是一个数组
        console.log(e.currentTarget.files[0].name)//文件名
    }
}
</script>

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

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

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

<div id="container" class="content" style="width: 600px;height: 600px;margin: 100px  auto;background-color: darkred">

</div>

JS:

<script type="text/javascript">
    window.onload=function (ev) {
        var container = document.getElementById("container");
        container.ondragenter=function () {

        }
        container.ondragover=function (e) {
            //关闭默认事件
            e.stopPropagation();
            e.preventDefault();
            //设置获取模式，为复制
            e.dataTransfer.dropEffect = 'copy';
        }
        container.ondragleave =function () {

        }
        container.ondrop=function (e) {
            e.stopPropagation();
            e.preventDefault();
            var file = e.dataTransfer.files;
            var file_name = file[0].name;
            console.log(file_name);
        }
    }

</script>

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