Question

你好！我正在尝试使其运行一个名为loadDocument的功能，该功能需要从用户本地计算机加载的文件的URL才能正常工作。我正在编写一个API，以从本地用户计算机加载文档，并将其显示在网络阅读器上。

这是我的上传按钮： <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();函数才能正常工作吗？

编辑：实际上，没有任何更改。读取文件的正确方法是： <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)所做的：它返回一个 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？

3 个答案: