在页面中上传一张图片的时候,通常需要在页面不刷新的情况下就将图片立刻显示出来。传统的做法可能就是上传图片发送ajax请求将图片上传到自己的服务器,然后返回图片的地址将其显示在页面中。在h5中我们可以不用ajax请求,可以用h5的FileReader对象来读取图片将图片实时显示在页面中。贴一段代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
<script type="text/javascript">
function imgPreview(fileDom){
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
}
//获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<img id="preview" width="50px" height="auto"/>
<br />
<input type="file" name="file" οnchange="imgPreview(this)" />
</body>
</html>
以下内容为在网上所查找
FileReader
-
属性,所有属性都是只读的:
- FileReader.error,读取文件时,出现的DOMError。
- FileReader.readyState,读取状态;0,没有数据加载;1,数据正在加载;2,读取已经完成。
- FileReader.result,文件内容;该属性只在读取操作完成后才有效,并且格式取决于读取时使用的方法。
-
事件:
- FileReader.onabort,读取操作中止。
- FileReader.onerror,读取出现错误。
- FileReader.onload,读取成功完成后。
- FileReader.onloadstart,读取开始。
- FileReader.onloadend,读取完成,无论是否读取成功。
- FileReader.onprogress,当读取Blob内容时。
-
方法:
- FileReader.abort()
中止读取。然后readyState变为2。 - FileReader.readAsArrayBuffer()
将文件读取成ArrayBuffer。 - FileReader.readAsBinaryString()
读取成二进制字符串。 - FileReader.readAsDataURL()
读取成DataURL。 - FileReader.readAsText()
读取成文本。
- FileReader.abort()