使用HTML5 File API 在浏览器中实现本地与远程桌面间传递文件

最新推荐文章于 2024-06-24 12:54:33 发布

方工

最新推荐文章于 2024-06-24 12:54:33 发布

阅读量2.1k

点赞数

文章标签： HTML5 File 远程桌面文件浏览器

本文链接：https://blog.csdn.net/onestab/article/details/78457498

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>