Windows远程桌面剪贴板支持文本复制与粘贴,但是不支持文件级别的复制与粘贴。有时我们需要传送文件到远程机器,实现起来很麻烦。
幸好现代浏览器都支持File API,我们可以利用文本传送的方式实现两台机器间任意文件的复制。
无须后台服务器或应用程序支持,只需两个HTML文件,一个是本地机器上的FileReader.html, 一个是远程机器上的FileReceiver.html。
一 本地文件 FileReader.html
FileReader#drop_zone {border:dashed 2px black;background-color:#ffc;
text-align:center;padding:20px;}
File:
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var f = evt.dataTransfer.files[0];
var fr = new FileReader();
fr.addEventListener('load',function(){
document.getElementById('txt').value = fr.result;
});
fr.readAsDataURL(f);
document.getElementById('fn').innerHTML = escape(f.name) + '(' + f.size + ' bytes)';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
二 远程机器上的 FileReceiver.html
FileReceiverFileName:
document.getElementById('dl').addEventListener('click',function(){
var te = document.getElementById('txt');
if(te.value.indexOf('data:')==0){
var d=document.getElementById('dl');
d.href = te.value;
d.setAttribute('download', document.getElementById('fn').value);
}
});
三 用法
1. 在本地浏览器中打开 FileReader.html, 将要传送的文件拖入页面上方的黄色框内,复制下方文本框中的全部文本。
2. 在远程机器上的浏览器中打开 FileReceiver.html, 将刚才复制的内容贴入下方的文本框内,在第一个文本框内输入将要保存的文件名,点击Download 按钮。