如何使用纯 JavaScript 读取图像文件？

Question

我是 javascript 新手，目前我的一个项目遇到问题，其中包括查看网站根文件夹中的图像。这是我当前的代码：

var reader = new FileReader();

    reader.onload = function(event){
           var dataUri = event.target.result,
               img = document.createElement("img");

               img.src =  dataUri;
               document.body.appendChild(img);
    };

    reader.onerror = function(event){
           console.log("File could not be read: " + event.target.error.code);
    };

reader.readAsDataURL("/uploads/extras/item_a/image1.png");

这是我的代码，它没有显示任何内容。在我的控制台中，它给了我一个错误或Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Answer 1

您似乎正在尝试加载用于 Javascript 的图像，而不是将其放入您的 HTML 中。您可以通过在 Javascript 中创建图像元素并设置它的源来做到这一点。除非您将其插入某处，否则它不会显示在您的网站上。

var image = document.createElement("img");
image.src = "file_path.png";

如果您希望访问的文件不在您网站的文件夹中，而是在通过文件路径运行网站机器的任何人上，出于安全原因，Javascript 会阻止您执行此操作。 （想象一下允许网站在您不知情的情况下访问您计算机上的任何文件！）您必须使用<input type="file"> 标签。

Answer 2

这是我编写的用于以 HTML 和 Javascript 显示来自文件系统的图像的代码。

var inputSelectionHandler = function(event) {

            var reader = new FileReader();
            reader.readAsDataURL(event.srcElement.files[0]);
            reader.onload = function() {
                var fileContent = reader.result;
                var div = document.createElement("div");
                div.style.backgroundImage = "url(" + fileContent + ")";
                var btn_trigger = document.getElementById("btn_trigger");
                var file_btn = btn_trigger.parentElement;
                file_btn.insertBefore(div, btn_trigger);
            }

}

Answer 3

这是正确的做法

  var openFile = function(file) {
    var input = file.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output' style="height:100px; width:100px;">

做一些调查以了解代码中的错误在哪里，这最好学习

当您放弃时，请在此处发表评论，我很乐意再次提供帮助！ :)