實(shí)現(xiàn)拖入文件獲取路徑，不用官方提供的消息模式，使用HTML5原生的拖放獲取即可。

我使用了jQuery，記得引用

引用方法，在程序目錄，運(yùn)行命令：npm install jquery --save

創(chuàng)建一個(gè)元素，設(shè)置好ID

<div class="trts" id="content">
   <p>拖入文件讀取數(shù)據(jù)</p>
</div>

接下來(lái)在渲染進(jìn)程中寫(xiě)代碼

var content = $("#content")
content.on("dragenter dragover", function (event) {
    // 重寫(xiě)ondragover 和 ondragenter 使其可放置
    event.preventDefault();
});

content.on("dragleave", function (event) {
    event.preventDefault();
});
content.on("drop", function (event) {
    // 調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）
    event.preventDefault();
    var efile = event.originalEvent.dataTransfer.files[0];
    console.log(efile.path, "utf8");
    return false;
});

其中，主要的是drop方法中，獲取到數(shù)組，默認(rèn)只獲取一個(gè)，如果要獲取多個(gè)拖入文件，直接遍歷event.originalEvent.dataTransfer.files即可。

上面兩個(gè)方法是鼠標(biāo)文件拖入，或者離開(kāi)時(shí)的操作，可以默認(rèn)為空，但是event.preventDefault();必須寫(xiě)，這樣才能接管瀏覽器默認(rèn)的操作。