zoukankan      html  css  js  c++  java
  • URL.createObjectURL和URL.revokeObjectURL

    一、URL.createObjectURL
      URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL。
      这个URL的生命仅存在于它被创建的这个文档里,新的对象URL指向执行的File对象或者是Blob对象。

      语法:
        objectURL = window.URL.createObjectURL(blob || file);

      File对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象。

      Blob对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob对象。
      又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象。

    二、URL.revokeObjectURL

      每次调用createObjectURL时,即使你已经为同一个文件创建过一个URL,也会创建一个新的URL对象。
      如果你不再需要这个对象,需要使用URL.revokeObjectURL()方法释放它。
      虽然当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它时,就应该释放它。

      语法:
        window.URL.revokeObjectURL(objectURL);

    、实例:预览选择的图片

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>预览选择的图片</title>
     6     <script>
     7     window.URL = window.URL || window.webkitURL;
     8     /**
     9      * 显示选择的文件预览
    10      * @param  {[type]} files 选择的文件
    11      */
    12     function showSelectedImages(files) {
    13         var fileList = document.getElementById('fileList');
    14         var list = document.createElement("ul");
    15         fileList.appendChild(list);
    16         for (var i = 0; i < files.length; i++) {
    17             if (isImageByType(files[i].type)) {
    18                 var li = document.createElement("li");
    19                 list.appendChild(li);
    20 
    21                 var img = document.createElement("img");
    22                 img.src = window.URL.createObjectURL(files[i]);
    23                 img.width = 200;
    24                 img.onload = function() {
    25                     window.URL.revokeObjectURL(this.src);
    26                 }
    27                 li.appendChild(img);
    28                 var info = document.createElement("span");
    29                 info.innerHTML = files[i].name + "," + parseBytes(files[i].size);
    30                 li.appendChild(info);
    31             }
    32         }
    33     }
    34     /**
    35      * 解析文件字节数
    36      * @param  {[type]} bytes   总字节数
    37      * @param  {[type]} decimal 小数点后位数
    38      * @return {[type]}         解析后的文件大小
    39      */
    40     function parseBytes(bytes, decimal) {
    41         var fileSize = 0,
    42             units = ["KB", "MB", "GB", "TB"];
    43         decimal = decimal || 3;
    44         for (var i = 0, size = bytes / 1024; size > 1; size /= 1024, i++) {
    45             fileSize = size.toFixed(decimal) + units[i];
    46         }
    47         return fileSize;
    48     }
    49     /**
    50      * 判断文件是否是图片
    51      * @param  {[type]}  fileType 文件
    52      * @return {Boolean}
    53      */
    54     function isImageByType(fileType) {
    55         return fileType.indexOf("image") < 0 ? false : true;
    56     }
    57 </script>
    58 </head>
    59 <body>
    60     <input type="file" multiple onchange="showSelectedImages(this.files)" id="uploadInput">
    61     <div id="fileList"></div>
    62 </body>
    63 </html>
  • 相关阅读:
    ant 软件包不存在报错
    在 Internet Explorer 中使用 Windows 窗体控件
    智能客户端
    Back to the Future with Smart Clients
    "Automation 服务器不能创建对象" 的解决方案
    Top 10 Reasons for Developers to Create Smart Clients
    Updater Application Block for .NET
    Smart Client Application Model and the .NET Framework 1.1
    Security and Versioning Models in the Windows Forms Engine Help You Create and Deploy Smart Clients
    智能客户端技术总结(二)
  • 原文地址:https://www.cnblogs.com/huliang56/p/6257120.html
Copyright © 2011-2022 走看看