现代浏览器基于安全考虑,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基本上是不支持。