JS獲取本地文件的方式

通過js來獲取文件的方式，記錄兩種方法：
第一種，通過input獲取：
html:

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

其中multiple表示可以同時選中多文件
JS:

<script>
window.οnlοad=function(){
    var getFile =document.getElementById("files");
    getFile.οnchange=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.οnlοad=function (ev) {
        var container = document.getElementById("container");
        container.οndragenter=function () {

        }
        container.οndragοver=function (e) {
            //關閉默認事件
            e.stopPropagation();
            e.preventDefault();
            //設置獲取模式，爲複製
            e.dataTransfer.dropEffect = 'copy';
        }
        container.ondragleave =function () {

        }
        container.οndrοp=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’;該方法是設置文件保存的方式爲複製。