本文介绍了html5中将图片的绝对路径转换成文件对象，分享给大家，具体如下：
将图片的绝对路径转换成ba64编码，请看
我们先来理解基本知识点：
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('该文件不是图像文件'); } el { console.log('该文件是图像文件'); } 2015年父亲节是哪一天 但是如果只让传图片的话，可以在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类型，如果是未知类型，则返回一个空字符串。
请看如下代码：
<!doctype html><html> <head> <title>filesystem:url</title> </head> <body> <div> <label>选择文件：</label> <input type="file" id="file" /> <input type="button" value="显示文件信息" onclick="showfiletype()" /> <p>文件字节长度: <span id="size"></span></p> <p>文件类型：<span id="type"></span></p> </div> <script> function showfiletype() { var file; // 获取用户选择的第一个文件 file = document.getelementbyid('file').files[0]; var size = document.getelementbyid('size'); va家长对孩子的期望r type = document.getelementbyid('type'); // 显示文件字节的长度 size.innerhtml =里约奥运会首金 file.size; // 显示文件的类型 type.innerhtml = file.type; // 打开控制台 查看返回的file对象 console.log(file); } </script> </body></html>注意：blob和file是可以同时使用的，可以使用filereader从blob中读取数据。
下面是一段绝对路径的图片地址转换为ba64编码的图片，然后将b铺叙a64编码的图片转换成blob对象。代码如下：
<!doctype html><html> <head> <title>将以ba64的图片url数据转换为blob</title> </head> <body> <script> /** * 将以ba64的图片url数据转换为blob * @param urldata * 用url方式表示的ba64图片数据 */ function convertba64urltoblob(ba64){ var urldata = ba64.dataurl; var type = ba64.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}); } /* * 图片的绝对路径地址 转换成ba64编码 如下代码： */ function getba64image(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).tolowerca(); 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 ba64 = getba64image(image); console.log(ba64); /* 打印信息如下： { dataurl: "data:image/png;ba64,xxx" type: "image/jpg" } */ var img2 = convertba64urltoblob(ba64); console.log(img2); /* 打印信息如下： blob {size: 9585, type: "image/jpg"} */ } </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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-03 08:14:49，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e9d62df3c516a55625cebb40c82a4664.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：html5中如何将图片的绝对路径转换成文件对象.doc
本文 PDF 下载地址：html5中如何将图片的绝对路径转换成文件对象.pdf
| 留言与评论（共有 0 条评论） |
