electron 原生拖拽文件獲取路徑
實現拖入文件獲取路徑,不用官方提供的消息模式,使用HTML5原生的拖放獲取即可。
我使用了jQuery,記得引用
引用方法,在程序目錄,運行命令:npm install jquery --save
創建一個元素,設置好ID
<div class="trts" id="content"> <p>拖入文件讀取數據</p> </div>
接下來在渲染進程中寫代碼
var content = $("#content") content.on("dragenter dragover", function (event) { // 重寫ondragover 和 ondragenter 使其可放置 event.preventDefault(); }); content.on("dragleave", function (event) { event.preventDefault(); }); content.on("drop", function (event) { // 調用 preventDefault() 來避免瀏覽器對數據的默認處理(drop 事件的默認行為是以鏈接形式打開) event.preventDefault(); var efile = event.originalEvent.dataTransfer.files[0]; console.log(efile.path, "utf8"); return false; });
其中,主要的是drop方法中,獲取到數組,默認只獲取一個,如果要獲取多個拖入文件,直接遍歷event.originalEvent.dataTransfer.files即可。
上面兩個方法是鼠標文件拖入,或者離開時的操作,可以默認為空,但是event.preventDefault();必須寫,這樣才能接管瀏覽器默認的操作。
版權聲明:
作者:applek
鏈接:http://m.aaigroup.cn/electrondrop.html
文章版權歸作者所有,未經允許請勿轉載。
THE END