html5中如何将图片的绝对路径转换成文件对象
author:一佰互联 2019-04-20   click:161

本文介绍了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类型,如果是未知类型,则返回一个空字符串。

请看如下代码:

<!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");        var type = document.getElementById("type");        // 显示文件字节的长度        size.innerHTML = file.size;        // 显示文件的类型        type.innerHTML = file.type;        // 打开控制台 查看返回的file对象        console.log(file);      }    </script>      </body></html>

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

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

<!DOCTYPE html><html>  <head>    <title>将以base64的图片url数据转换为Blob</title>  </head>  <body>    <script>      /**         * 将以base64的图片url数据转换为Blob         * @param urlData         * 用url方式表示的base64图片数据         */        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});        }      /*        * 图片的绝对路径地址 转换成base64编码 如下代码:        */      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);        /*         打印信息如下:         {          dataURL: "data:image/png;base64,xxx"          type: "image/jpg"         }         */        var img2 = convertBase64UrlToBlob(base64);        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

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