Javascript 如何使用纯javascript读取图像文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42498717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to read image file using plain javascript?
提问by Trish Siquian
I am new to javascript and I am currently having problem with one of my projects which includes viewing of an image from the root folder of the website. Here is my current code:
我是 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");
That's my code and it doesnt show anything. And in my console it gives me an error or Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
那是我的代码，它没有显示任何内容。在我的控制台中，它给了我一个错误或Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
回答by Omar El Don
Here's the correct way to do it
这是正确的做法
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;">Do a little investigation to know where is the error in your code, that's better to learn
做一点调查，知道你的代码错误在哪里，最好学习一下
When you give it up, just leave a comment here, i'll be glad to help again! :)
当您放弃时，只需在此处发表评论，我将很乐意再次提供帮助！:)
回答by Raj Hirani
Here is the code that I have written to display the images from the file system in HTML and Javascript.
这是我编写的代码，用于以 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);
}
}
