本文介绍了html5中将图片的绝对路径转换成文件对象，分享给大家，具体如下：
将图片的绝对路径转换成base64编码，请看这篇文章
我们先来理解基本知识点：
1. 理解HTML5中的FileList对象与file对象。
在HTML5中，FileList对象表示用户选择的文件列表。通过添加multipe属性，file控件内允许一次选择多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则是file对象的列表。代表用户选择的所有文件。我们先来看一个简单的demo，看下file文件对象有哪些属性。如下代码：
| <!DOCTYPE html> <html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>选择：</label> <input type='file' multiple id="file" /> <input type="button" value="文件上传" onClick="showFile()" /> </div> <script> function showFile() { var files = document.getElementById('file').files; // 返回所有被选择的文件 for (var i = 0, ilen = files.length; i < ilen; i++) { // 打印出单个文件对象的信息 console.log(files[i]); /* * 打印的信息如下： File { lastModified: 1457946612000 lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {} name: "test.html" size: 796 type: "text/html" webkitRelativePath: "" */ /* 如果上传的是一张图片的话，会返回如下信息的 File { lastModified: 1466907500000 lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {} name: "a.jpg" size: 23684 type: "image/jpeg" webkitRelativePath: "" } */ /* 因此 如果需要判断该上传的文件是不是图像文件的话，可以根据type类型来判断如下： var file = files[i]; if (!/image/w+/.test(file.type)) { console.log('该文件不是图像文件'); } else { console.log('该文件是图像文件'); } 但是如果只让传图片的话，可以在image控件添加一个属性 accept="image/*" 即可；我们可以如下写代码： <input type='file' multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' /> */ } } </script> </body> </html> |
2. 理解Blob对象
要点：在HTML5中，新增一个Blob对象，代表原始二进制数据，其实file对象也是继承了Blob对象。
Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。
