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 相关文章推荐
模仿OSO的论坛(三)
Oct 09 PHP
PHP产生随机字符串函数
Dec 06 PHP
探讨php中遍历二维数组的几种方法详解
Jun 08 PHP
PHP版本如何选择?应该使用哪个版本?
May 13 PHP
隐性调用php程序的方法
Jun 13 PHP
php文件压缩之PHPZip类用法实例
Jun 18 PHP
php基于单例模式封装mysql类完整实例
Oct 18 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
Dec 24 PHP
Yii框架实现图片上传的方法详解
May 20 PHP
PHP的PDO连接讲解
Jan 24 PHP
Yii框架实现对数据库的CURD操作示例
Sep 03 PHP
Yii框架 session 数据库存储操作方法示例
Nov 18 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 默默经典版本
2009/08/04 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
重新认识php array_merge函数
2014/08/31 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
php实现微信模板消息推送
2018/03/30 PHP
移动节点的jquery代码
2014/01/13 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
浅谈vue首屏加载优化
2018/06/28 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python画微信表情符的实例代码
2019/10/09 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
运动会稿件200字
2014/02/07 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript