php中通过Ajax如何实现异步文件上传的代码实例


Posted in PHP onMay 07, 2011

1:取得file对象
2:读取2进制数据
3:模拟http请求,把数据发送出去(这里通常比较麻烦)
在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据;
4:完美实现
遇到的问题
目前仅有 firefox 可以正确上传文件。(chrome也可以采google.gears上传)
对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因)
chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。(经过测试普通文本文件可以正确上传)

<!doctype html > 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>html5 file and filereader</title> 
<link href="html/ui.css" _mce_href="html/ui.css" rel="stylesheet" /> 
</head> 
<body> 
<style type="text/css"><!-- 
.box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px; 
-webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif; 
} 
.bl{ font-weight:700;} 
.dl{ padding:10px; border-top:1px dotted #999;} 
.dl dd{ padding:0; margin:0;} 
.log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;} 
.log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;} 
.log ul{margin:0px; padding:0; list-style:none;} 
--></style><style type="text/css" _mce_bogus="1"><!-- 
.box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px; 
-webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif; 
} 
.bl{ font-weight:700;} 
.dl{ padding:10px; border-top:1px dotted #999;} 
.dl dd{ padding:0; margin:0;} 
.log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;} 
.log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;} 
.log ul{margin:0px; padding:0; list-style:none;} 
--></style> 
<div class="box" id="baseinfo"> 
<h2>(把图片拖拽到这里)利用 filereader 获取文件 base64 编码</h2> 
<div></div> 
</div> 
<div class="log"> 
<ul id="log"> 
</ul> 
</div> 
<script type="text/CSS" ><!-- 
(function(){ 
window.datavalue = 0; 
var html = ' <dl class="dl"> 
<dd>filename: $filename$</dd> 
<dd>filetype: $filetype$</dd> 
<dd>filesize: $filesize$</dd> 
<dd><img src="$data$" /></dd> 
<dd>filebase64: <br/> 
<div style="width:100%; height:100px;">$filebase64$</div> 
</dd> 
</dl> 
' 
var log = function(msg){ 
//console['log'](msg); 
document.getelementbyid('log').innerhtml += '<li>'+ msg +'</li>'; 
} 
var dp = function(){ 
var defconfig = { 
dropwrap : window 
} 
this.init.apply(this, [defconfig]); 
this.file = null; 
} 
dp.prototype = { 
init:function(args){ 
var dropwrap = args.dropwrap; 
var _this = this; 
dropwrap.addeventlistener("dragenter", this._dragenter, false); 
dropwrap.addeventlistener("dragover", this._dragover, false); 
dropwrap.addeventlistener('drop', function(e){_this.readfile.call(_this,e)} , false); 
log('window drop bind--ok'); 
}, 
_dragenter:function(e){e.stoppropagation();e.preventdefault();}, 
_dragover:function(e){e.stoppropagation();e.preventdefault();}, 
readfile:function(e){ 
e.stoppropagation(); 
e.preventdefault(); 
var dt = e.datatransfer; 
var files = dt.files; 
for(var i = 0; i< files.length;i++){ 
var html = html.slice(); 
html = this.writeheader(files[i], html); 
this.read(files[i], html); 
} 
}, 
read:function(file, h){ 
var type = file.type; 
var reader = new filereader(); 
reader.onprogress = function(e){ 
if (e.lengthcomputable){ 
log('progress: ' + math.ceil(100*e.loaded/file.size) +'%') 
} 
}; 
reader.onloadstart = function(e){ 
log('onloadstart: ok'); 
}; 
reader.onloadend = function(e){ 
var _result = e.target.result; 
//console['log'](e.target); 
log('data uri--ok'); 
var d = document.createelement('div'); 
h = h.replace('$filebase64$', _result); 
if(/image/.test(file.type)){ 
h = h.replace('$data$',_result); 
} 
d.innerhtml = h; 
document.getelementbyid('baseinfo').appendchild(d); 
}; 
reader.readasdataurl(file); // www.3ppt.com base 64 编码 
return; 
}, 
writeheader:function(file, h){ 
log(file.filename + '+' + (file.size/1024)); 
return h.replace('$filename$', file.filename).replace("$filesize$",(file.size/1024)+'kb').replace("$filetype$",file.type); 
} 
} 
new dp(); 
})() 
// --></script> 
</body> 
</html> 
filereader对象 
var filereader = new filereader(); 
filereader.onloadend = function(){ 
console.log(this.readystate); // 这个时候 应该是 2 
console.log(this.result); 读取完成回调函数,数据保存在result中 
} 
filereader.readasbinarystring(file);// 开始读取2进制数据 异步 参数为file 对象 
//filereader.readasdataurl(file); // 读取base64 
//filereader.readastext(file);//读取文本信息
PHP 相关文章推荐
PHP项目开发中最常用的自定义函数整理
Dec 02 PHP
php中使用__autoload()自动加载未定义类的实现代码
Feb 06 PHP
深入php数据采集的详解
Jun 02 PHP
PHP四舍五入精确小数位及取整
Jan 14 PHP
php弹出对话框实现重定向代码
Jan 23 PHP
linux中cd命令使用详解
Jan 08 PHP
PHP随机生成唯一HASH值自定义函数
Apr 20 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
Jul 15 PHP
必须收藏的23个php实用代码片段
Feb 02 PHP
PHP使用内置函数生成图片的方法详解
May 09 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
Jun 30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
Feb 23 PHP
php 安全过滤函数代码
May 07 #PHP
PHP 遍历文件实现代码
May 04 #PHP
PHP中使用CURL伪造来路抓取页面或文件
May 04 #PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
May 04 #PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
May 04 #PHP
php join函数应用
May 04 #PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
May 04 #PHP
You might like
php max_execution_time执行时间问题
2011/07/17 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
社区母亲节活动方案
2014/03/05 职场文书
计算机系本科生求职信
2014/05/31 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
档案接收函格式
2015/01/30 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
React如何创建组件
2021/06/27 Javascript