通過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’;該方法是設定檔案儲存的方式為複製。