html5中怎么将图片的绝对路径转换成文件对象
这篇文章将为大家详细讲解有关html5中怎么将图片的绝对路径转换成文件对象,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司服务紧随时代发展步伐,进行技术革新和技术进步,经过十年的发展和积累,已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员,并且完全形成了一套成熟的业务流程,能够完全依照客户要求对网站进行成都网站建设、成都网站设计、建设、维护、更新和改版,实现客户网站对外宣传展示的首要目的,并为客户企业品牌互联网化提供全面的解决方案。
具体如下:
我们先来理解基本知识点:
1. 理解HTML5中的FileList对象与file对象。
在HTML5中,FileList对象表示用户选择的文件列表。通过添加multipe属性,file控件内允许一次选择多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象则是file对象的列表。代表用户选择的所有文件。我们先来看一个简单的demo,看下file文件对象有哪些属性。如下代码:
filesystem:URL
2. 理解Blob对象
要点:在HTML5中,新增一个Blob对象,代表原始二进制数据,其实file对象也是继承了Blob对象。
Blob对象有两个属性,size属性表示一个Blob对象的字节长度,type属性表示Blob的MIME类型,如果是未知类型,则返回一个空字符串。
请看如下代码:
filesystem:URL 文件字节长度:
文件类型:
注意:Blob和File是可以同时使用的,可以使用FileReader从Blob中读取数据。
下面是一段绝对路径的图片地址转换为base64编码的图片,然后将base64编码的图片转换成blob对象。代码如下:
将以base64的图片url数据转换为Blob
注意:在HTML5中,新增一个Blob对象,代表原始二进制数据,其实file对象也是继承了Blob对象。因此我们可以使用图片的绝对地址转换成文件对象。
因此我们可以使用绝对地址的图片转换成file文件对象,详细的demo可以看我git上图片上传控件,该插件先是图片上传支持,然后突然发现到编辑页面的时候,需要显示默认的图片,也可以同时支持在默认显示图片的情况下继续上传新图片,或者删除所有的图片,但是开发人员给我的只有图片的绝对地址,所以就一直想通过图片的绝对地址如何转换成file对象,如果不转成file对象的话,使用这句代码的时候 var reader = new FileReader(); 会报错,因此可以使用我们上面讲的blob对象先转换成blob对象,然后就可以使用文件操作对象 fileReader。
关于“html5中怎么将图片的绝对路径转换成文件对象”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
本文标题:html5中怎么将图片的绝对路径转换成文件对象
链接分享:http://pwwzsj.com/article/pdicho.html