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 分库分表hash算法
Nov 12 PHP
php 获取一个月第一天与最后一天的代码
May 16 PHP
PHP 小心urldecode引发的SQL注入漏洞
Oct 27 PHP
php ckeditor上传图片文件名乱码解决方法
Nov 15 PHP
php查询mysql数据库并将结果保存到数组的方法
Mar 18 PHP
PHP性能分析工具XHProf安装使用教程
May 13 PHP
php+ajax实现无刷新分页
Nov 18 PHP
PHP函数func_num_args用法实例分析
Dec 07 PHP
php构造函数与析构函数
Apr 23 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
May 12 PHP
php 实现银联商务H5支付的示例代码
Oct 12 PHP
Laravel框架下载,安装及路由操作图文详解
Dec 04 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和ACCESS写聊天室(三)
2006/10/09 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
js友好的时间返回函数
2016/08/24 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
vue渲染方式render和template的区别
2020/06/05 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
深入解析Python中的集合类型操作符
2015/08/19 Python
利用python代码写的12306订票代码
2015/12/20 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python类如何定义私有变量
2020/02/03 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
领导党性分析材料
2014/02/15 职场文书
教师节表彰会主持词
2015/07/06 职场文书
2019入党申请书格式
2019/06/25 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
Java对文件的读写操作方法
2022/04/29 Java/Android