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


Posted in HTML / CSS onJanuary 11, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
详解Html5原生拖拽操作
Jan 12 #HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 #HTML / CSS
canvas烟花特效锦集
Jan 17 #HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 #HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 #HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 #HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 #HTML / CSS
You might like
javascript 页面划词搜索JS
2009/09/28 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
Python中使用PIPE操作Linux管道
2015/02/04 Python
详解Python中的条件判断语句
2015/05/14 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
对python中的logger模块全面讲解
2018/04/28 Python
django+mysql的使用示例
2018/11/23 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python创建字典的八种方式
2019/02/27 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
高中运动会入场词
2014/02/14 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
素质拓展训练感想
2015/08/07 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书