通过HTML5 FileReader实现上传图片预览功能

转载 2017年07月17日 15:55:47

在上传图片到服务器之前,我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。

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

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

通过readAsDataURL(file)方法,我们就可以将读取到的图片数据以URI的方式显示在页面中。

例如下面是一个上传图片预览的例子:


上面例子中的HTML代码如下:

<divid="wrapper">      
  <inputid="fileUpload"type="file"/><br />
  <divid="image-holder"> </div>
</div>

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

$("#fileUpload").on('change',function () {
 
    if(typeof (FileReader) != "undefined") {
 
        varimage_holder = $("#image-holder");
        image_holder.empty();
 
        varreader = 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[0]);
    }else {
        alert("你的浏览器不支持FileReader.");
    }
});
实现多张图片预览效果

先来看看效果,下面是一个可以预览多张上传图片的例子。


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

<divid="wrapper">      
  <inputid="fileUpload"type="file"multiple /><br />
  <divid="image-holder"> </div>
</div>

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

$("#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(var i = 0; i < countFiles; i++) {
 
               varreader = 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("请选择图像文件。");
   }
});

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



文章转载自:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html

相关文章推荐

通过HTML5 FileReader实现上传图片预览功能

在上传图片到服务器之前,我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。 FileReader是HTML5 File API的一部分。它实现了一种...

[jQuery+Html5]上传图片预览Image

[jQuery+Html5]上传图片预览Image
  • Konaji
  • Konaji
  • 2016-07-22 09:39
  • 3805

HTML5上传图片预览(不需通过服务器)

var Upload = (function(){ var upimg = document

HTML5时代的纯前端上传图片预览及严格图片格式验证函数

一、要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式。这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证。这样就造成了一定的...
  • binjly
  • binjly
  • 2014-01-22 16:44
  • 4901

Html5 FileReader实现即时上传图片功能

Document       #kk{    width:400px;    height:400px;    overflow: hidden;   }   #pr...

FileReader实现上传图片时的图片预览

为什么要使用FileReader?在html静态文件中,当我们在input文件选择框中选择一个文件时,该input框的值为文件的绝对路径,这个时候我们可以直接将该路径复制给我们需要预览的图片的src即...

html5预览并上传图片的功能

如何使用html5 fileReader来上传图片呢?

html5的FileReader实现图片上传预览并生成base64

利用html5的FileReader实现图片上传预览并生成base64。HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)