微客导航 » 文章资讯 » JavaScript使用FileReader实现图片上传预览效果

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

2023-09-25 05:19:06 266

FileReader是HTML5FileAPI的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法。

readAsText(file,encoding)：以纯文本的方式读取文件，将读取到的文件保存到result属性中。
readAsDataURL(file)：读取文件并将文件以数据URI的形式保存在result属性中。
readAsBinaryString(file)：读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一个字节。
readAsArrayBuffer(file)：读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
multiple属性表示支持多张图片

$("#fileUpload").on('change',function(){

//获取上传文件的数量
varcountFiles=$(this)[0].files.length;

varimgPath=$(this)[0].value;
varextn=imgPath.substring(imgPath.lastIndexOf('.')+1).toLowerCase();
varimage_holder=$("#image-holder");
image_holder.empty();

if(extn=="gif"||extn=="png"||extn=="jpg"||extn=="jpeg"){
if(typeof(FileReader)!="undefined"){

//循环所有要上传的图片
for(vari=0;i",{
"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可以支持InternetExplorer10+、FireFox,、Chrome和Opera浏览器。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐