html5中如何将图片的绝对路径转换成文件对象html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

本文介绍了html5中将图片的绝对路径转换成文件对象，分享给大家，具体如下：

将图片的绝对路径转换成base64编码，请看这篇文章

我们先来理解基本知识点：

1. 理解HTML5中的FileList对象与file对象。

在HTML5中，FileList对象表示用户选择的文件列表。通过添加multipe属性，file控件内允许一次选择多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则是file对象的列表。代表用户选择的所有文件。我们先来看一个简单的demo，看下file文件对象有哪些属性。如下代码：

选择：

2. 理解Blob对象

要点：在HTML5中，新增一个Blob对象，代表原始二进制数据，其实file对象也是继承了Blob对象。

Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。

请看如下代码：

选择文件：
文件字节长度: 
文件类型：

注意：Blob和File是可以同时使用的，可以使用FileReader从Blob中读取数据。

下面是一段绝对路径的图片地址转换为base64编码的图片，然后将base64编码的图片转换成blob对象。代码如下：

注意：在HTML5中，新增一个Blob对象，代表原始二进制数据，其实file对象也是继承了Blob对象。因此我们可以使用图片的绝对地址转换成文件对象。

因此我们可以使用绝对地址的图片转换成file文件对象，详细的demo可以看我git上图片上传控件，该插件先是图片上传支持，然后突然发现到编辑页面的时候，需要显示默认的图片，也可以同时支持在默认显示图片的情况下继续上传新图片，或者删除所有的图片，但是开发人员给我的只有图片的绝对地址，所以就一直想通过图片的绝对地址如何转换成file对象，如果不转成file对象的话，使用这句代码的时候 var reader = new FileReader(); 会报错，因此可以使用我们上面讲的blob对象先转换成blob对象，然后就可以使用文件操作对象 fileReader。

详细的代码，请看我git上的 图片上传控件(https://github.com/tugenhua0707/html5UploadImage) , 效果查看 https://tugenhua0707.github.io/html5UploadImage/index.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！