关闭

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

625人阅读 评论(0) 收藏 举报

在上传图片到服务器之前,我们希望可以预览一下要上传的图片。这个功能可以通过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

0
0
查看评论

FileReader上传文件即使显示(但不负责持久化, 只是内存中的回显处理)

FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件。使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料;而缺点便是,网页的大...
  • qwbtc
  • qwbtc
  • 2016-08-02 10:14
  • 588

使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
  • fdipzone
  • fdipzone
  • 2014-07-20 00:37
  • 57287

FileReader多图片上传

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 上传多张图片</title> <style type=&...
  • wjy199506
  • wjy199506
  • 2017-03-14 17:19
  • 212

HTML5 FileReader多图预览 Ajax多图异步上传ThinkPHP接收

最近在做一个多图上传的功能,就想试试用html5的FileReader接口来实现上传前的预览,利用FormData包装多张图片,提交给ThinkPHP后台,找了一些网上的例子,然后自己根据实际需求改了一下,实现了以下效果:  做的效果不是特别好看,请谅解!有想法的人,可以去把效果...
  • eoesoft
  • eoesoft
  • 2015-01-17 21:59
  • 1714

HTML5使用FileReader预览上传的图片文件

<!--html--> <div class="form-group control-label"> <div class="col-sm-2 control-label"> ...
  • oak160
  • oak160
  • 2016-11-22 20:11
  • 1241

FileReader 实现预览图片

var result = document.getElementById("result"); var input = document.getElementById("file_input"); if(typeof FileReader === '...
  • PerfectUrl
  • PerfectUrl
  • 2017-04-10 17:16
  • 368

FileReader:读取图片文件并显示

第一步创建html >     >请选择一个图像文件:      type="file" id="file_input" />...
  • X_X_OO
  • X_X_OO
  • 2016-09-13 21:12
  • 539

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

Html 部分 JS部分 function showPreview(source) { var file = source.files[0];...
  • sinat_25926481
  • sinat_25926481
  • 2016-03-27 21:23
  • 2171

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

在上传图片到服务器之前,我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。 FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文...
  • m0_37310097
  • m0_37310097
  • 2017-07-17 10:27
  • 243

纯前端实现图片上传预览(filereader )

  • 2015-11-23 10:14
  • 2KB
  • 下载
    个人资料
    • 访问:16258次
    • 积分:753
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:7篇
    • 译文:2篇
    • 评论:1条
    最新评论