如何使用 fileReader 对象的 url？

Question

你好！我试图让它工作一个名为 loadDocument 的函数，它需要从用户本地计算机加载的文件的 url 才能工作。我正在写一个 API 从本地用户计算机加载文档，并在网络上显示它 reader。

这是我的上传按钮： <input type="file" id="input" onchange="module.onLoadSelection();" alt="Browse" name="upload"/>

这是我没有 fileReader 的函数：

var onLoadSelection = function () {
    var select = document.getElementById('input');
    if (select && select.value) {
        var id= '';
        var url = select.files.item(0).name;
        module.loadDocument(url,id);
    }
};

这是我的 fileReader 函数：

var loadTest = function (input) {
    var file = document.querySelector('input[type=file]').files[0];
    console.log("file loaded! ->", file); // i can read the obj of my file
    var reader = new FileReader();

    var id = ''; // don't need rightnow
    var url = reader.readAsDataURL(file);
    console.log("url :", url); // show me undefined....
    module.loadDocument(url,id);
}

我正在尝试的是从用户计算机获取加载文件的 url 以使我的函数 loadDocument 正常工作。她需要一个 url 参数才能工作。

loadDocument 是一个 API 函数，我假设由于安全原因我无法获取用户的文件路径。

我的 loadDocument(); 功能需要 change/update 什么才能正常工作？

编辑：其实没什么要改的。阅读我的文件的正确方法是： <input type="file" id="input" onchange="module.onLoadSelection(this.files);" alt="Browse" name="upload"/>

var onLoadSelection = function (files) {
    if (files && files.length == 1) {
       var id = '';
       var url = URL.createObjectURL(files[0]);
       module.loadDocument(url,id);
    }
};

Answer 1

 function PreviewFiles(input) {
        if (input.files && input.files[0]) {
             var reader = new FileReader();
             reader.onload = function (e) {
             //alert(e.target.result);
                 $('#pclogo').prop('src', e.target.result)
                    .width(200)
                    .height(200);
                    var base64result = e.target.result.split(',')[1];
                $('input[name="logo"]').val(base64result);
            };
            reader.readAsDataURL(input.files[0]);

            }

        }

Answer 2

文件对象有 readAsDataURL method.

用那个。

  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    doSomethingWithAUrl(reader.result);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }

Answer 3

根本不要使用 FileReader。

当您想要显示浏览器内存或用户磁盘中的文件（或 Blob）时，您只需生成一个 URL 并指向该内存槽即可。
这正是 URL.createObjectURL(blob) 所做的：它 returns 一个 Blob URI (blob://) 指向内存或磁盘上的数据，作用就像一个简单的指针。

与FileReader.readAsDataURL() 方法相比，此方法具有多种优点。仅举几例：

只将数据存储在内存中一次，当 FileReader 在读取时需要它，然后生成一个 base64 编码的副本，并在显示时生成另一个...
同步。由于它所做的只是生成一个指针，因此无需使其异步。
更简洁的代码。

const module = {
  loadDocument: (url) => {
    document.body.append(
      Object.assign(
        document.createElement('iframe'),
        { src: url }
      )
    )
  }
};

document.querySelector('input[type=file]').addEventListener('input', function (evt) {
    var file = this.files[0];
    var url = URL.createObjectURL(file);
    module.loadDocument(url);
});

<input type="file">

如何使用 fileReader 对象的 url？

How to work with the url of a fileReader object?

javascript

filereader