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

这是正确的方法

  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;">

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

当你放弃时，只需在这里发表评论，我将很乐意再次提供帮助！：）

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

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

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

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

如何使用普通的javascript阅读图像文件？

3 个答案: