时间戳

首页 > 解决方案 > 如何使用 fileReader 对象的 url？

javascript - 如何使用 fileReader 对象的 url？

问题描述


你好！我正在尝试使其工作一个名为 的函数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);
    }
};

标签： javascriptfilereader

解决方案

 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]);

            }

        }

推荐阅读