欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html5中如何将图片的绝对路径转换成文件对象

程序员文章站 2024-02-11 10:07:10
这篇文章主要介绍了html5中将图片的绝对路径转换成文件对象,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-01-11...

本文介绍了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

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

上一篇： 浅谈Java线程Thread.join方法解析

下一篇： Android ListView里控件添加监听方法的实例详解

推荐阅读