今天小编跟大家讲解下有关html5中如何将图片的绝对路径转换成文件对象 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5中如何将图片的绝对路径转换成文件对象 的相关资料，希望小伙伴们看了有所帮助。
本文介绍了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]); function convertbase64UrlToBlob(base64){ var urlData = base64.dataURL; var type = base64.type; var bytes = window.atob(urlData.split(',')[1]); //去掉url的头 并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}); } function getbase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); return { dataURL: dataURL, type: "image/"+ext }; } var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; var image = new Image(); image.crossOrigin = ''; image.src = img; image.onload = function(){ var base64 = getbase64Image(image); console.log(base64); var img2 = convertbase64UrlToBlob(base64); console.log(img2); } </script> </body></html>注意：在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
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
