本程序是利用3.x的Firefox浏览器可以读取本地文件的特性,实现通过xmlHttPRequest上传大文件功能,并在可以上传过程中动态显示上传进度。略加修改,并与服务器端配合,可以实现断点续传等诸多功能。
本例主要是研究FireFox的file-input节点的一些特性,其他客户端应用,如Flash、Sliverlight等,在实现客户端大文件上传时,在数据传输与服务器端存储等方面,与本例的思路基本一致。
注意:文件体积似乎有临界点,但这个临界点是多少尚未确认。建议不要用此方法上传超过100M的文件。
以下是客户端javascript代码
/*
* 上传按钮事件
*/
function send(fileID){
var sender = new FireFoxFileSender(
/*
* 上传配置文件
*/
{
/*
* input file 元素,可以是dom节点,也可以是id的字符串值
*/
file : fileID,
/*
* 接收上传数据的服务器端地址
*/
url : 'UPLOADER.php',
/*
* 每次发送数据包的大小。可根据服务器具体情况更改。IIS6默认为200K
*/
packageSize : '200000',
/*
* 出现错误时触发该事件。本例仅在初始化时判断各参数是否齐备,并没有抛出发送过程中的错误。
*/
onError : function(arrMsg){
alert(arrMsg.join('\r\n'));
sender = null;
delete sender;
},
/*
* 发送过程中触发该事件。本例中主要用于显示进度。
*/
onSending : function(sd, xhr){
var per = sd.percent();
document.getElementById('Message').innerHTML = per + '% ';
/*
* 该判断是在最后一次发送结束后,通过xhr的onreadystatechange事件触发的
* 如果传输过程中没有其他错误,基本可以确定为服务器端接收完成
*/
if(parseInt(per) == 100){ alert('服务器端接收完成'); }
},
/*
* 该事件仅仅为【本地数据发送完成】时触发。
* 请区别本地数据发送完成和服务器端返回完成信息这两种情况
* 本例中并没有对服务器接收信息的情况做响应
* 即使服务器端没有接收和保存任何数据
* 只要确保xhr返回readyState == 4 和 status == 200
* 发送就会继续进行
* 服务器端如何返回完成信息可以通过更改接收数据页面的代码自定实现
* 然后通过对xhr.responseText的值来做判断
*/
onSendFinished : function(){
alert('本地数据发送完成');
}
}
);
sender.send();
}
/*
* 做一些判断和处理...
*/
/*
* 以下是服务器端对发送数据的简单响应
* - 假如有数据被post过来 则输出对base64转换为二进制流后,二进制流的长度
* - 否则输出0
* 这仅仅是一个例子,并且在js端没有接收这个信息
* 同样,也可以采用在header中写入反馈信息等等方法
* 回馈信息给客户端
* 主要目的是确定上传过程中是否有其他问题出现
* 以确保上传文件完整
*/
if(!empty($b64)){
$stream = base64_decode($b64);
echo strlen($stream);
/*
* 追加方式写入文件
* 在此修改文件保存位置
*/
$file = fopen('' . $fileName , 'a');
if($file)
if(fwrite($file, $stream))
fclose($file);
} else echo '0';