zoukankan      html  css  js  c++  java
  • window.URL对象用法总结

    window.URL 主要作用是读取文件的字符串,在img或video等带有src属性的标签上展示。

    1. 静态方法

    objectURL = createObjectURL(object) //object是file或blob

    从文件获取url,这些文件可能来自本地硬盘从<input type="file" />选择的文件,或者是ajax从服务器请求到内存里的。

    revokeObjectURL(objectURL) //createObjectURL返回的objectURL

    回收objectURL,释放资源。因为objectURL不会自动回收,会和document一样的周期,至页面关闭。

    2. URL对象可以读取、修改查询字符串

    var parsedUrl = new URL('https://test.com?id=111');
    
    // 111
    console.log('parsedUrl' , parsedUrl, parsedUrl.searchParams.get("id"));
    
    // https://test.com/?id=123v&name=test
    console.log('parsedUrl' , parsedUrl.toString(), parsedUrl.searchParams.set("name" , 'test'));

    3. URL.toString()和URL.href可以取得URL对象的url

    let url = new URL('http://www.test.com/index.html')
    
    // url.href http://www.test.com/index.html
    // url.toString() http://www.test.com/index.html
    console.log('url.href', url.href, 'url.toString()' , url.toString());

    4. URL的应用场景

    4.1 createObjectURL实现预览图片

    <input type="file" id="file" multiple>
    <div id="preview">图片预览</div>
    <script>
        var preview = document.querySelector('#preview');
        var oFile = document.querySelector('#file');
        oFile.onchange = function(){
            var url = window.URL.createObjectURL(oFile.files[0]);
            // 创建预览图片
            var img = new Image();
            img.src = url;
            img.style.width = "80px";
            img.style.height = "80px";
            // 插入预览图片
            preview.appendChild(img);
        }
    </script>

    4.2 URL实现预览视频

    <div>
      <video width="400" height="500" controls="controls"></video>
    </div>
    <div>
      <input type="file" accept="video/*" />
    </div>
    <script src="./jquery.min.js"></script>
    <script>
    $("input").change(function(){
      var files = this.files;
      if(!files.length) {
        return;
      }
      $("video").attr("src", window.URL.createObjectURL(files[0]));
      $("video").get(0).play();
    });
    </script>
  • 相关阅读:
    Qt5:快速设计对话框 QtDesigner 的使用
    Qt5:为菜单项添加图标 、 快捷键 和 状态栏 提示
    Qt5:在窗口上创建菜单栏
    Qt5:主窗口的创建 子类化QMainWindow
    AltiumDesigner设计快速入门
    AT24C02的MSP430驱动
    DSP_Builder设计方法说明_SinWave
    矩阵按键的MSP430驱动函数
    DAC8552使用说明
    PS2的FPGA解码模块
  • 原文地址:https://www.cnblogs.com/mengff/p/12820019.html
Copyright © 2011-2022 走看看