实现拖入文件获取路径,不用官方提供的消息模式,使用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();必须写,这样才能接管浏览器默认的操作。

 

发表评论

共有 0 条评论