javascript获取剪切板中的文件路径

Question

如题，现在我复制了几个文件，我想在js中获取到这几个文件的本地路径，好用来批量上传文件。

Answer 1

现代浏览器基于安全考虑，js 是无法直接读取剪贴板的。

唯一的可能性是，用户在可编辑元素中（如 contenteditable='true'
的 div）主动触发粘贴操作（如，通过 ctrl+V）。此时通过监听 paste 事件， 可以从event中获取到用户所粘贴的内容。

示例代码（支持现代浏览器）：

<div id='editableDiv' contenteditable='true'>Paste here</div>

function handlePaste (e) {
    var clipboardData, pastedData;

    // 阻止粘贴
    e.stopPropagation();
    e.preventDefault();

    // 获取剪贴板信息
    clipboardData = e.clipboardData || window.clipboardData;
    // 获取剪贴板内容，getData 的参数是数据类型，这里为了获取文件路径是 'URL'；如果想获取粘贴的文本，用 'Text'
    pastedData = clipboardData.getData('URL');

    // 处理信息，此时 pastedData 应该是 'file:///path/to/xxx'
    alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

但是，与其费心思这样做，为何不直接做成拖动上传呢，应该更易于使用吧。

示例来源

http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059

追问

我在IE11 中测试无效，当复制的内容是文本的时候成功触发了事件，但当复制的内容是文件的时候，不会触发事件。

追答

无解。按照规范，应该触发paste事件，然而现在各浏览器对ClipboardAPI的支持都不完善。现在IE11已经不被微软支持了，所以要不然限定你的用户用Chrome系浏览器，要不然用拖拽之类的上传文件方法（建议）。

追问

我试了拖拽类的方法，发现在Chrome支持良好，在IE基本上是不支持。