首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

File, FileReader 和 Ajax 文件上传实例分析(php)

Posted in Javascript onApril 27, 2011

File FileReader 可以干什么？
Ajax文件上传例子
FileReader 对象可以读取文件的 Base64编码数据（readAsDataURL），2进制字符串（readAsBinaryString），文本（readAsText）并且都是异步的。
对了，Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成。

File 对象
File对象可以从 input[type=file].files 数组，和拖拽事件 event.dataTransfer.files 中获取到。
第一张图是 Chrome 下的 File 对象，第2个图是Firefox下的File对象。Firefox下会多几个方法，注意这里的读取数据方法是同步的。

File, FileReader 和 Ajax 文件上传实例分析(php)

File, FileReader 和 Ajax 文件上传实例分析(php)
FileReader 对象
这是用来读取文件数据的（并且是异步的）。下面是一个简单的代码（file对象用上面的方法取得） 

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);//读取文本信息

可以运行下面简单的例子（chrome 和 firefox 有效） 
<!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/javascript" ><!-- 
(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); // 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>

如何实现异步文件上传
有了File FileReader 对象的支持，异步文件上传将变得简单。（以前都会把form提交到iframe来实现）
1:取得File对象
2:读取2进制数据
3:模拟HTTP请求，把数据发送出去（这里通常比较麻烦）
在forefox下使用 XMLHttpRequest 对象的 sendAsBinary 方法发送数据；
4:完美实现
遇到的问题
目前仅有 firefox 可以正确上传文件。（Chrome也可以采google.gears上传）
对于从firefox和chrome下读取到的文件数据好像不一样（不知道是否是调试工具的原因）
Chrome以及其他高级浏览器没有 sendAsBinary 方法 只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。（经过测试普通文本文件可以正确上传）
如果你有兴趣？
下载这个PHP环境的测试程序，研究下如何实现其他浏览器的文件上传  

File, FileReader 和 Ajax 文件上传实例分析(php)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
理解Javascript_09_Function与Object
Oct 16 Javascript
jquery 插件学习（一）
Aug 06 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
js中Object.create实例用法详解
Oct 05 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 #Javascript
JavaScript之HTMLCollection接口代码
Apr 27 #Javascript
利用jQuery操作对象数组的实现代码
Apr 27 #Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 #Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 #Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 #Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 #Javascript
烈阳天道(2) 下载(1) 广播(8) 中学科技(1) 短波(8) 无线电(12) 怀旧期刊(1) 保养(1) 萨拉雷(1) 雄兵连(3)
You might like
基于pear auth实现登录验证
2010/02/26 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
python数据爬下来保存的位置
2020/02/17 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
大学生实习鉴定评语
2014/04/25 职场文书
求职自我推荐信
2014/06/25 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
婚宴新娘致辞
2015/07/28 职场文书