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

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下会多几个方法，注意这里的读取数据方法是同步的。


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环境的测试程序，研究下如何实现其他浏览器的文件上传

赞 (0)

相关推荐

  • JavaScript使用FileReader实现图片上传预览效果

    FileReader是HTML5 File API的一部分.它实现了一种异步文件读取机制.可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器.为了读取文件中的数据,FileReader提供了如下几个方法. readAsText(file,encoding):以纯文本的方式读取文件,将读取到的文件保存到result属性中. readAsDataURL(file):读取文件并将文件以数据URI的形式保存在result属性中. readAsBin

  • 基于JavaScript FileReader上传图片显示本地链接

    基于JavaScript FileReader上传图片显示本地链接

    简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果. 页面中多个,上传

  • JavaSctit 利用FileReader和滤镜上传图片预览功能

    JavaSctit 利用FileReader和滤镜上传图片预览功能

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File或 Blob对象指定要读取的文件或数据. 1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. 2.FileReader接口事件 FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态. 重点介绍下:readAsDataU

  • JavaScript html5利用FileReader实现上传功能

    JavaScript html5利用FileReader实现上传功能

    本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下 1. Html部分 <h2>文件上传演练</h2> <div id="result"> <!-- 这里用来显示读取结果 --> <div id="inResult"> <div id="inImgs"></div> <div id="imgInfo&quo

  • JS+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e

  • JavaScript中的FileReader图片预览上传功能实现代码

    关于filereader图片预览上传功能的实现代码如下所示: html: <div style="width:200px;height:200px;"> <label for="ceshi" style="display:block;"> <img style="width:200px;height:200px;" id="image" src=""/>

  • javascript HTML5文件上传FileReader API

    文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能.但过去WEB程序员都很清楚,用HTML表单上传文件是很麻烦的事情,特别是你想了解一下用户上传的文件的一些属性,必须等它上传完成后才能知道. 未知的东西上传到服务器上,有可能产生安全问题,也有可能体积太大,超过允许,浪费空间.现在好了,WEB技术在进步,HTML5带来了很多好东西.这个FileReader API就能让你在用户上传之前就能获取上传文件的一些基本属性. HTML代码 这个F

  • 借助FileReader实现将文件编码为Base64后通过AJAX上传

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果. 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload. 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了. 灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食. 前端对文件进行base64编码并通过ajax向服务器

  • javascript结合fileReader 实现上传图片

    关于File API这里就不详细解释了,小伙伴们自行度娘吧,来我们就要利用文件句柄来读取文件内容,这是通过FileReader来实现的,通过FileReader接口,我们可以异步地将文件内容加载到内存中,赋予某个js变量. 复制代码 代码如下: function getImgSrc(target, callback) {     if (window.FileReader) {         var oPreviewImg = null, oFReader = new window.FileR

  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

随机推荐