FileReader对象有5种方法,其中四种用于读取文件,另一种用来读取过程中断,需要注意的是:无论读取成功与失败,方法并不会返回读取结果,而是将结果保存在result属性中。此对象也是异步的。
FileReader对象的方法如下:
readAsBinaryString(file):
这个方法将blob对象或文件中的数据读取为二进制字符串,通常我们将它传送到服务器端,服务器端可以通过这段字符串存储文件。
readAsText(file,encoding):
以纯文本形式读取文件,将读取到的文本保存在result属性中,第二个参数用于指定编码类型,可选的。
readAsDataURL(file):
读取文件并将文件以数据URL的形式保存在result属性中。
readAsArrayBuffer(file):
读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
FileReader对象的事件如下:
onabort: 数据读取中断时触发、
onerror: 数据读取出错时触发、
onloadstart: 数据读取开始时触发、
onprogress: 数据读取中、
onload: 数据读取成功完成时触发、
onloadend: 数据读取完成时触发,无论成功或失败。
使用例子:
h5部分:
<input id="imagefile" type="file" name="filename" οnchange="
html5Reader()" />
<img id="preview" alt="image" style="height: 200px;" name="pic" />
js部分:
function html5Reader(file) {
if(typeof FileReader == 'undefined') {
alert("抱歉,你的浏览器不支持FileReader,无法图片上传");
}
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
//dataurl的格式为data:image/******;adshgflkasnga,意思是文件头+二进制串,可用;分割
reader.onload = function(e) {
$.post("./php/UpLoadImage.php",
{ img: e.target.result },
//post成功后的回调函数
function(ret) {
if(ret.img != '') {
var pic = document.getElementById("preview");
pic.src = "./img/" + ret.img;
} else {
alert('upload fail');
}
},
'json');
}
}
PHP部分:
<?php
$img = isset($_POST['img'])? $_POST['img'] : '';
// 获取图片,使用“;”分割dataurl格式,然后把文件头和二进制串分开赋值到数组 //
data:image/jpeg;base64,/9j/4AAQSk
list($type, $data) = explode(',', $img);
// 判断类型
if(strstr($type,'image/jpeg')!==''){
$ext = '.jpg';
}elseif(strstr($type,'image/gif')!==''){
$ext = '.gif';
}elseif(strstr($type,'image/png')!==''){
$ext = '.png';
}
// 生成的文件名
$photo = time().$ext;
//生成文件路径
$photo_path = "../img/{$photo}";
// 生成文件
file_put_contents($photo_path, base64_decode($data), true);
// 数据返回
header('content-type:application/json;charset=utf-8');
$ret = array('img'=>$photo_path);
echo json_encode($ret);
?>