方法一:使用js的FileReader对象
1、FileReader对象简介
1.检测浏览器对FileReader的支持
if(window.FileReader) {
var fr = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}
调用FileReader对象的方法
FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,
需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。
方法名 | 参数 | 描述 |
abort | none | 中断读取 |
readAsBinaryString | file | 将文件读取为二进制码 |
readAsDataURL | file | 将文件读取为 DataURL |
readAsText | file, [encoding] | 将文件读取为文本 |
readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。(其中base64的方式就是由此来获得的。。)
2. FileReader处理事件简介
FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。
事件 | 描述 |
onabort | 中断时触发 |
onerror | 出错时触发 |
onload | 文件读取成功完成时触发 |
onloadend | 读取完成触发,无论成功或失败 |
onloadstart | 读取开始时触发 |
onprogress | 读取中 |
文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。
fr.onload = function() {
this.result;
};
例子1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FileReader</title>
</head>
<body>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file" />
<input type="button" value="读取图像" οnclick="readAsDataURL()" />
<input type="button" value="读取二进制数据" οnclick="readAsBinaryString()" />
<input type="button" value="读取文本文件" οnclick="readAsText()" />
</p>
<div id="result" name="result"></div>
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file");
//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
result.InnerHTML = "<p>你的浏览器不支持FileReader接口!</p>";
//使选择控件不可操作
file.setAttribute("disabled", "disabled");
}
function readAsDataURL() {
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if (!/image\/\w+/.test(file.type)) {
alert("看清楚,这个需要图片!");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function (e) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = '<img src="' + this.result + '" alt="" />';
}
}
function readAsBinaryString() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
}
function readAsText() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
}
</script>
</body>
</html>
3 、使用js的FileReader对象实现上传图片时的图片预览功能
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<title>test</title>
<script>
//选择图片时预览功能
function imageshow(source) {
var file = source.files[0];
var imageid = source.id;
if (window.FileReader) {
var fr = new FileReader();
fr.onloadend = function (e) {
document.getElementById("portrait" + imageid).src = e.target.result;
};
fr.readAsDataURL(file);
}
document.getElementById("image" + imageid).style.display = "none";
document.getElementById("show" + imageid).style.display = "block";
}
</script>
</head>
<body>
<div>
<div id="image1">
<p>上传截图</p>
<input type="file" name="screenshot1" id="1" οnchange="imageshow(this)" />
</div>
<div id="show1" style="display: none;">
<img src="" id="portrait1" width="100" height="70">
</div>
<div id="image2">
<p>上传截图</p>
<input type="file" name="screenshot2" id="2" οnchange="imageshow(this)" />
</div>
<div id="show2" style="display: none;">
<img src="" id="portrait2" width="100" height="70">
</div>
<div id="image3">
<p>上传截图</p>
<input type="file" name="screenshot3" id="3" οnchange="imageshow(this)" />
</div>
<div id="show3" style="display: none;">
<img src="" id="portrait3" width="100" height="70">
</div>
</div>
</body>
</html>
方法二:使用window.createObjectURL
直接上代码:
<!DOCTYPE html>
<html>
<head>
<title>图片上传预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<form name="form0" id="form0">
<input type="file" name="file0" id="file0" multiple="multiple" />
<br>
<img src="" width="100" height="100" id="img0">
</form>
<script>
$("#file0").change(function () {
var objUrl = getObjectURL(this.files[0]);
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl);
}
});
//取得该文件的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</body>
</html>