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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
Jun 21 PHP
色色整理的PHP面试题集锦
Mar 08 PHP
解析php中die(),exit(),return的区别
Jun 20 PHP
PHP入门之常量简介和系统常量
May 12 PHP
thinkphp备份数据库的方法分享
Jan 04 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
Mar 18 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
Dec 16 PHP
Laravel中前端js上传图片到七牛云的示例代码
Sep 04 PHP
PHP递归实现快速排序的方法示例
Dec 18 PHP
PHP实现的简单组词算法示例
Apr 10 PHP
PHP切割汉字的常用方法实例总结
Apr 27 PHP
PHP CURL实现模拟登陆并上传文件操作示例
Jan 02 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
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php实现倒计时效果
2015/12/19 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
JS backgroundImage控制
2009/05/19 Javascript
javascript动态加载二
2012/08/22 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python实现ID3决策树算法
2018/08/29 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
django 自定义过滤器的实现
2019/02/26 Python
详解python 内存优化
2020/08/17 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
园长自我鉴定
2013/10/06 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
企业内控岗位的职责
2014/02/07 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书