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 相关文章推荐
上传文件先创建目录 再上传到目录里面去
Dec 29 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
Sep 15 PHP
ThinkPHP关联模型操作实例分析
Sep 23 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
Feb 03 PHP
php面向对象中static静态属性和静态方法的调用
Feb 08 PHP
php生成年月日下载列表的方法
Apr 24 PHP
php实现smarty模板无限极分类的方法
Dec 07 PHP
Zend Framework动作助手FlashMessenger用法详解
Mar 05 PHP
php实现图片上传并利用ImageMagick生成缩略图
Mar 14 PHP
PHP自定义函数格式化json数据示例
Sep 14 PHP
PHP实现的折半查找算法示例
Dec 19 PHP
php生成微信红包数组的方法
Sep 05 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检测用户是否关闭浏览器的方法
2016/02/14 PHP
Yii2单元测试用法示例
2016/11/12 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
React组件refs的使用详解
2018/02/09 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
python实现双人五子棋(终端版)
2020/12/30 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
展会邀请函范文
2014/01/26 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
大学生求职信范文
2014/05/24 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
个人年终总结怎么写
2015/03/09 职场文书
教师节获奖感言
2015/07/31 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
微信小程序实现聊天室功能
2021/06/14 Javascript