FireFox浏览器使用Javascript上传大文件_PHP
本程序是利用3.x的Firefox浏览器可以读取本地文件的特性，实现通过xmlHttPRequest上传大文件功能，并在可以上传过程中动态显示上传进度。略加修改，并与服务器端配合，可以实现断点续传等诸多功能。
本例主要是研究FireFox的file-input节点的一些特性，其他客户端应用，如Flash、Sliverlight等，在实现客户端大文件上传时，在数据传输与服务器端存储等方面，与本例的思路基本一致。
注意：文件体积似乎有临界点，但这个临界点是多少尚未确认。建议不要用此方法上传超过100M的文件。
以下是客户端javascript代码
复制代码 代码如下:
/*
* FireFoxFileSender version 0.0.0.1
* by MK winnie_mk(a)126.com
*
* 【本程序仅限于FireFox3.x版本，其他浏览器是否可以运行未做测试。】
* 【测试通过：FireFox 3.6.8 / Apache/2.2.11 (Win32) php/5.2.6 】
* ******************************************************************************
* 本程序是利用3.x的FireFox浏览器可以读取本地文件的特性
* 实现通过xmlhttpRequest上传大文件功能
* 并在可以上传过程中动态显示上传进度
* 略加修改，并与服务器端配合，可以实现断点续传等诸多功能
* 本例主要是研究FireFox的file-input节点的一些特性
* 其他客户端应用，如Flash、Sliverlight等，在实现客户端大文件上传时
* 在数据传输与服务器端存储等方面，与本例的思路基本一致
* 注意：文件体积似乎有个临界点，但这个临界点是多少尚未确认。建议不要用此方法上传超过100M的文件。
* ******************************************************************************
*/
function FireFoxFileSender(config){
var conf = config || {};
/*
* 错误信息队列
*/
this.errMsg = [];
/*
* 判断各参数是否齐备
*/
this.f = typeof conf.file == 'string' ?
document.getElementById(conf.file) : conf.file;
if(!this.f){ this.errMsg.push('Error: Not set the input file.'); }
else if(this.f.files.length < 1){ this.errMsg.push('Error: Not select a file.'); }
else {
this.fileName = this.f.value;
/*
* 在尝试直接发送二进制流时失败，改用发送base64编码数据。
*/
this.data = (this.data = this.f.files[0].getAsDataURL())
.substr(this.data.indexOf(',') 1);
this.length = this.data.length;
/*
* 文件实际大小
*/
this.fileSize = this.f.files[0].fileSize;
/*
* 文件类型
*/
this.contentType = this.f.files[0].fileType;
}
/*
* 服务器端接收地址
*/
this.url = conf.url;
if(!this.url){
this.errMsg.push('Error: Not set the instance url to send binary.');
}
/*
* 发送数据包的大小。默认100kb
*/
this.packageSize = conf.packageSize || 102400;
/*
* 每次发送数据包大小应为4的倍数，确保服务器端转换base64编码正确。
*/
if(this.packageSize % 4 != 0)
this.packageSize = parseInt(this.packageSize / 4) * 4;
this.onSendFinished = conf.onSendFinished || null;
this.onSending = conf.onSending || null;
this.onError = conf.onError || null;
}
FireFoxFileSender.prototype = {
/*
* 记录当前发送的数据
*/
currentData : null,
/*
* 记录读取位置
*/
position : 0,
/*
* 数据大小。该值为base64字符串的长度。
*/
length : -1,
/*
* 检查错误队列，尝试触发onError事件
*/
checkError : function(){
if(this.errMsg.length > 0){
/*
* 触发onError事件
*/
typeof this.onError == 'function' && this.onError(this.errMsg);
return;
}
},
/*
* 创建XMLHttpRequest
*/
createSender : function(){
var xhr = new XMLHttpRequest();
xhr.open('POST', this.url, true);
var _ = this;
xhr.onreadystatechange = function(){
/*
* 当服务器段响应正常，则循环读取发送。
*/
if(xhr.readyState == 4 && xhr.status == 200){
/*
* 触发onSending事件
*/
if(typeof _.onSending == 'function') _.onSending(_, xhr);
/*
* 延时发送下一次请求，否则服务器负担过重
*/
var send = setTimeout(function(){
_.send();
clearTimeout(send);
send = null;
}, 100);
}
}
return xhr;
},
/*
* 发送数据
*/
send : function(){
this.checkError();
/*
* 获取当前要发送的数据
*/
this.currentData = this.data.substr(this.position, this.packageSize);
/*
* 更改postion，模拟数据流移位
*/
this.position = this.currentData.length;
/*
* 如果读取字符串长度大于0，则发送该数据
* 否则触发onSendFinished事件
*/
if(this.currentData.length > 0) {
var xhr = this.createSender();
/*
* 自定义头部信息，通知服务器端文件相关信息
* 实际应用时可修改此部分。
*/
xhr.setRequestHeader('#FILE_NAME#', this.fileName);
xhr.setRequestHeader('#FILE_SIZE#', this.length);
xhr.setRequestHeader('#CONTENT_TYPE#', this.contentType);
xhr.send(this.currentData);
} else if(typeof this.onSendFinished == 'function') {
/*
* 触发onSendFinished事件
*/
this.onSendFinished(this);
}
},
/*
* 计算已发送数据百分比
*/
percent : function(){
if(this.length <= 0 ) return -1;
return Math.round((this.position / this.length) * 10000) / 100;
},
onSendFinished : null, //该事件是以本地数据发送完成为触发，并不是服务器端返回的完成信息。
onSending : null,
onError : null
}
/*
* 上传按钮事件
*/
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('rn'));
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();
}
以下是服务器端php代码
复制代码 代码如下:
/*
* 获取输入信息
*/
$b64 = file_get_contents("php://input");
/*
* 获取头部信息
*/
$headers = getallheaders();
$fileName = $headers['#FILE_NAME#'];
$contentType = $headers['#CONTENT_TYPE#'];
/*
* 做一些判断和处理...
*/
/*
* 以下是服务器端对发送数据的简单响应
* - 假如有数据被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';
客户端完整代码
复制代码 代码如下:
2
3
4
5
6
7
8
9
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PHP和Python：比较两种流行的编程语言
Apr 14, 2025 am 12:13 AM
PHP和Python各有优势，选择依据项目需求。1.PHP适合web开发，尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能，语法简洁，适合初学者。
说明PHP中的安全密码散列（例如，password_hash，password_verify）。为什么不使用MD5或SHA1？
Apr 17, 2025 am 12:06 AM
在PHP中，应使用password_hash和password_verify函数实现安全的密码哈希处理，不应使用MD5或SHA1。1)password_hash生成包含盐值的哈希，增强安全性。2)password_verify验证密码，通过比较哈希值确保安全。3)MD5和SHA1易受攻击且缺乏盐值，不适合现代密码安全。
PHP行动：现实世界中的示例和应用程序
Apr 14, 2025 am 12:19 AM
PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务：用于购物车功能和支付处理。2)内容管理系统：用于动态内容生成和用户管理。3)API开发：用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践，PHP应用的效率和可维护性得以提升。
PHP：网络开发的关键语言
Apr 13, 2025 am 12:08 AM
PHP是一种广泛应用于服务器端的脚本语言，特别适合web开发。1.PHP可以嵌入HTML，处理HTTP请求和响应，支持多种数据库。2.PHP用于生成动态网页内容，处理表单数据，访问数据库等，具有强大的社区支持和开源资源。3.PHP是解释型语言，执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时，可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7
PHP的持久相关性：它还活着吗？
Apr 14, 2025 am 12:12 AM
PHP仍然具有活力，其在现代编程领域中依然占据重要地位。1)PHP的简单易学和强大社区支持使其在Web开发中广泛应用；2)其灵活性和稳定性使其在处理Web表单、数据库操作和文件处理等方面表现出色；3)PHP不断进化和优化，适用于初学者和经验丰富的开发者。
PHP类型提示如何起作用，包括标量类型，返回类型，联合类型和无效类型？
Apr 17, 2025 am 12:25 AM
PHP类型提示提升代码质量和可读性。1)标量类型提示：自PHP7.0起，允许在函数参数中指定基本数据类型，如int、float等。2)返回类型提示：确保函数返回值类型的一致性。3)联合类型提示：自PHP8.0起，允许在函数参数或返回值中指定多个类型。4)可空类型提示：允许包含null值，处理可能返回空值的函数。
PHP与Python：了解差异
Apr 11, 2025 am 12:15 AM
PHP和Python各有优势，选择应基于项目需求。1.PHP适合web开发，语法简单，执行效率高。2.Python适用于数据科学和机器学习，语法简洁，库丰富。
PHP和Python：代码示例和比较
Apr 15, 2025 am 12:07 AM
PHP和Python各有优劣，选择取决于项目需求和个人偏好。1.PHP适合快速开发和维护大型Web应用。2.Python在数据科学和机器学习领域占据主导地位。
