【第22期】观点:IT 行业加班,到底有没有价值?

通过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对象实现图片预览,利用FormData对象结合struts2实现无刷新文件上传(多参数)

1、页面内容如下:                                                         文件内容变化就调用getImgUrl方法,获取变化后的文件,然...

ExtJs上传图片预览功能

[code="java"] { columnWidth: .9, layout: 'form', border: false, items : [{ inputType : "file", fieldLabel: '上传图片', name: 'imageu

欢迎关注CSDN程序人生公众号

关注程序员生活,汇聚开发轶事。

HTML5上传图片预览

  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML5上传图片预览&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;script src="./js/

解决C:\fakepath路径加密问题,图片上传之前的预览功能的实现,html5 实现图片预览功能

之前要实现图片预览功能纠结了很久,在使用这个元素之后,选择完图片显示的路径总是加密过的,经过了百度的各种搜索,原来要想实现在上传图片之前实现预览功能只能在ie中实现,要想所有浏览器兼容的方法,只能使用...

HTML5 FileReader用法:图片预览、文本文件预览等

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt;title&gt;&lt;/title&gt;

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

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

用javascript实现本地图片预览(HTML5)

使用FileReader实现打开本地图片并预览。 挺方便的,可惜不是所有浏览器都支持,坑爹的IE。 [code="html"] function preImg(sourceId, targetId) { if (typeof FileReader === 'undefined') { aler

文件上传那些事儿

最近把产品目前使用的FileUploader从老的组件库分离出来的,自己也查阅了相关的各种资料,对文件上传的这些事有了更进一步的了解。把这些知识点总结一下,供自己日后回顾,也供有需要的同学参考,同时也...

有图片预览功能的上传表单

&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;图片上传——www.aa25.cn&lt;/title&gt; &lt;script&gt; function viewmypic(mypic,imgfile) { if (imgfile.value){ mypic.src=imgfile.value; mypic.st

HTML5上传图片预览

HTML5上传图片预览 请选择图片文件:JPG/GIF $("#file0").change(function(){ var objUrl = getObjectURL(this....
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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