这篇文章主要为大家详细介绍了javascript使用filereader实现图片上传预览效果，具有一定的参考学习javascript的价值，对javascript感兴趣的小伙伴们可以参考一下本篇文章
FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法。
readAsText(file,encoding)：以纯文本的方式读取文件，将读取到的文件保存到result属性中。
readAsDataURL(file)：读取文件并将文件以数据URI的形式保存在result属性中。
readAsBinaryString(file)：读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一个字节。
立即学习“Java免费学习笔记（深入）”；
readAsArrayBuffer(file)：读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
multiple 属性表示支持多张图片
登录后复制
$("#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 ", { "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浏览器。
对于JavaScript上传不熟悉的同学，这篇文章正好可以用来学习JavaScript上传！！
相关推荐：
JavaScript使用FileReader完成图片上传和预览的功能介绍
原生js FileReader对象的详细介绍
js通过filereader接口读取文件的实例代码
以上就是JavaScript使用FileReader实现图片上传预览效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789073.html
