Input file 预览图片

目前是一个小白,刚刚实习,发现需要用到input file 上传以后需要预览 所以去网上找了一下,记录一下,以备不时之需。


这个功能可以通过HTML5 的FileReader()方法来实现。


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的方式显示在页面中。



首先 我们先看一下 上传之前 预览单张的Html部分

Html部分


在看一下jQuery部分

jQuery部分


运行结果:

运行结果


我们在记录一下关于多张预览

HTML部分:

HTML部分


jQuery部分:

jQuery部分


运行结果:

运行结果


我个人不喜欢input file后面的地址 所以一般用 “color: transparent” 

运行结果:

这样看着舒服多了


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,010评论 19 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,780评论 18 399
  • 最近有几个问题一直被提及,就是图片上传这一块,虽然之前也说过,今天对这部分内容进行一个归纳和整理. 1.自定义in...
    殷灬商阅读 3,318评论 1 8
  • 一、前言 这两天恰好有一位同事问我怎样做一个图片预览功能。作为现代人的我们首先想到的当然是HTML5啦,其实HTM...
    东野文然阅读 1,160评论 0 2
  • Dear,我喜欢这个日子,十月十日,落雪无尽,长日漫漫。 这是我与你度过的第一个仪式。 我一向希望自己把日子过得有...
    何子初阅读 713评论 2 5