这次给大家带来js中filereader实现图片上传预览，js中filereader实现图片上传预览的注意事项有哪些，下面就是实战案例，一起来看一下。
javascript使用filereader实现图片上传预览效果也是很多人比较迷茫的，大多数人不知道怎么使用filereader实现图片上传预览效果，下面文章就给大家详细带来具体操作方法和代码，一起来看看。
filereader是html5 file api的一部分。它实现了一种异步文件读取机制。可以把filereader想象为xmlhttprequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，filereader提供了如下几个方法。
readastext(file,encoding)：以纯文本的方式读取文件，将读取到的文件保存到result属性中。
readasdataurl(file)：读取文件并将文件以数据uri的形式保存在result属性中。
readasbinarystring(file)：读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一个字节。
readasarraybuffer(file)：读取文件并将一个包含文件内容的arraybuffer保存在result属性中。
multiple 属性表示支持多张图片
<p id="wrapper">
<input id="fileupload" type="file" multiple /><br />
<p id="image-holder"> </p>
</p>
$(#fileupload).on('change', function () {
//获取上传文件的数量
var countfiles = $(this)[0].files.length;
var imgpath = $(this)[0].value;
var extn = imgpath.substring(imgpath.lastindexof('.') + 1).tolowercase();
var image_holder = $(#image-holder);
image_holder.empty();
if (extn == gif || extn == png || extn == jpg || extn == jpeg) {
if (typeof (filereader) != undefined) {
// 循环所有要上传的图片
for (var i = 0; i < countfiles; i++) {
var reader = new filereader();
reader.onload = function (e) {
$("<img />, {
src: e.target.result,
class: thumb-image
}).appendto(image_holder);
}
image_holder.show();
reader.readasdataurl($(this)[0].files[i]);
}
} else {
alert(你的浏览器不支持filereader！);
}
} else {
alert(请选择图像文件。);
}
});
filereader 可以支持 internet explorer 10+、firefox,、chrome 和opera浏览器。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
node.js如何实现装饰者模式
django多数据库使用步奏详解
以上就是js中filereader实现图片上传预览的详细内容。