HTML/CSS

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

代码预览

多张图片

先来看看效果,下面是一个可以预览多张上传图片的例子。在前面我们已经可以预览一张上传的图片。要想实现多张图片预览效果,必须在文件上传标签中添加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.    //获取上传文件的数量
  4.    var countFiles = $(this)[0].files.length;
  5.  
  6.    var imgPath = $(this)[0].value;
  7.    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  8.    var image_holder = $("#image-holder");
  9.    image_holder.empty();
  10.  
  11.    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
  12.        if (typeof (FileReader) != "undefined") {
  13.  
  14.            // 循环所有要上传的图片
  15.            for (var i = 0; i < countFiles; i++) {
  16.  
  17.                var reader = new FileReader();
  18.                reader.onload = function (e) {
  19.                    $("<img />", {
  20.                        "src": e.target.result,
  21.                            "class": "thumb-image"
  22.                    }).appendTo(image_holder);
  23.                }
  24.  
  25.                image_holder.show();
  26.                reader.readAsDataURL($(this)[0].files[i]);
  27.            }
  28.  
  29.        } else {
  30.            alert("你的浏览器不支持FileReader!");
  31.        }
  32.    } else {
  33.        alert("请选择图像文件。");
  34.    }
  35. });

代码预览


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

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!