Windows远程桌面剪贴板支持文本复制与粘贴,但是不支持文件级别的复制与粘贴。有时我们需要传送文件到远程机器,实现起来很麻烦。
幸好现代浏览器都支持File API,我们可以利用文本传送的方式实现两台机器间任意文件的复制。
无须后台服务器或应用程序支持,只需两个HTML文件,一个是本地机器上的FileReader.html, 一个是远程机器上的FileReceiver.html。
一 本地文件 FileReader.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FileReader</title>
<style>
#drop_zone {border:dashed 2px black;background-color:#ffc;
text-align:center;padding:20px;}
</style>
</head>
<body>
<div id="drop_zone">Drop file here</div>
<p>File: <span id="fn"></span></p>
<textarea id='txt' cols='120' rows='20'></textarea>
<script>
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);
</script>
</body>
</html>
二 远程机器上的 FileReceiver.html
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>FileReceiver</title>
</head>
<body>
<p>FileName:
<input id='fn' type='text' value='temp.bin' style='width:20em;'/>
<a id='dl' href="#" download='temp.bin'>Download</a></p>
<textarea id='txt' cols='120' rows='20'></textarea>
<script>
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);
}
});
</script>
</body></html>
三 用法
1. 在本地浏览器中打开 FileReader.html, 将要传送的文件拖入页面上方的黄色框内,复制下方文本框中的全部文本。
2. 在远程机器上的浏览器中打开 FileReceiver.html, 将刚才复制的内容贴入下方的文本框内,在第一个文本框内输入将要保存的文件名,点击Download 按钮。