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

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;}

Drop file here

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

FileReceiver

FileName:

Download

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 按钮。