!
也想出现在这里? 联系我们
广告位

HTML5(FileReader)实现图片上传预览功能

前言

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。下面通过本文给大家介绍 JS 中利用 FileReader 实现上传图片前本地预览功能,需要的朋友参考下。

平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到 URL 再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下。

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

readAsText(file,encoding):以纯文本的方式读取文件,将读取到的文件保存到 result 属性中

readAsDataURL(file):读取文件并将文件以数据 URI 的形式保存在 result 属性中

readAsBinaryString(file):读取文件并将一个字符串保存在 result 属性中,字符串中的每个字符表示一个字节

readAsArrayBuffer(file):读取文件并将一个包含文件内容的 ArrayBuffer 保存在 result 属性中
通过 readAsDataURL(file)方法,我们就可以将读取到的图片数据以 URI 的方式显示在页面中,例如下面是一个上传图片预览的例子:

  1. <div id="wrapper">
  2. <input id="fileUpload" type="file" /><br />
  3. <div id="image-holder"> </div>
  4. </div>

下面是结合 jQuery 和 FileReader 来实现上传图片预览的代码

单张图片

  1. $("#fileUpload").on('change', function () {
  2. if (typeof (FileReader) != "undefined") {
  3. var image_holder = $("#image-holder");
  4. image_holder.empty();
  5. var reader = new FileReader();
  6. reader.onload = function (e) {
  7. $("<img />", {
  8. "src": e.target.result,
  9. "class": "thumb-image"
  10. }).appendTo(image_holder);
  11. }
  12. image_holder.show();
  13. reader.readAsDataURL($(this)[0].files[0]);
  14. } else {
  15. alert("你的浏览器不支持FileReader.");
  16. }
  17. });

 

多张图片

先来看看效果,下面是一个可以预览多张上传图片的例子。在前面我们已经可以预览一张上传的图片。要想实现多张图片预览效果,必须在文件上传标签中添加 multiple 属性,使它可以选择多张图片。

  1. <div id="wrapper">
  2. <input id="fileUpload" type="file" multiple /><br />
  3. <div id="image-holder"> </div>
  4. </div>

然后修改一下上面的 jQuery 代码,使用一个循环来遍历所有要上传的图片,最后将它们分别显示出来。

  1. $("#fileUpload").on('change', function () {
  2. //获取上传文件的数量
  3. var countFiles = $(this)[0].files.length;
  4. var imgPath = $(this)[0].value;
  5. var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  6. var image_holder = $("#image-holder");
  7. image_holder.empty();
  8. if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
  9. if (typeof (FileReader) != "undefined") {
  10. // 循环所有要上传的图片
  11. for (var i = 0; i < countFiles; i++) {
  12. var reader = new FileReader();
  13. reader.onload = function (e) {
  14. $("<img />", {
  15. "src": e.target.result,
  16. "class": "thumb-image"
  17. }).appendTo(image_holder);
  18. }
  19. image_holder.show();
  20. reader.readAsDataURL($(this)[0].files[i]);
  21. }
  22. } else {
  23. alert("你的浏览器不支持FileReader!");
  24. }
  25. } else {
  26. alert("请选择图像文件。");
  27. }
  28. });

HTML5 FileReader 可以在 Internet Explorer 10+、FireFox,、Chrome 和 Opera 浏览器中正常工作。

给TA打赏
共{{data.count}}人
人已打赏
前端学习

INPUT、SELECT等表单元素图片对齐问题

2024-11-15 11:10:02

CMS教程

DeDecms图集上传图片无水印的解决方法

2022-1-13 2:59:25

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索