这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

图片视频的本地预览方法

有的时候，我们在上传文件的时候，需要先在本地做预览，下面是本地预览的常用的方法

file 首先得到文件

var file = document.getElementById("video").files[0]

1，得到本地的url

function getFileURL(file) {
      var getUrl = null;
      if (window.createObjectURL != undefined) {
        // basic
        getUrl = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        getUrl = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        getUrl = window.webkitURL.createObjectURL(file);
      }
      return getUrl;
    }
    
    //使用
    
    var url = getFileURL(file)

2，得到本地资源的 base64位字符串


/**

file 文件
回调函数
**/
function getpreviewFile(file,ballBack) {
        var reader  = new FileReader();
        reader.addEventListener("load", function () {
          ballBack && ballBack(reader.result)
        }, false);

        if (file) {
          reader.readAsDataURL(file);
        }
    }
    
    //使用
    getpreviewFile(file,(url)=>{
        console.log(url,'返回的url')
      });

注意事项

URL.createObjectURL()

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容它不能用于从文件系统中按路径名简单地读取文件。要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

图片视频实现本地预览的简单方法