如何从文件输入中显示图像？

10 浏览
0 Comments

如何从文件输入中显示图像？

这个问题已经在这里得到了答案：

上传图片前预览图片

我想选择一个文件并在浏览器中显示图片。

我尝试插入直接图片路径，它可以工作。

现在的问题是如何从中显示图片？

这是我代码的样子:

function myFunction() {
    var file = document.getElementById('file').files[0];
    var reader = new FileReader();
    reader.onloadend = function {
        var image = document.createElement("img");
        image.src = "reader"
        image.height = 200;
        image.width = 200;
        document.body.appendChild(image);
    }
}

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

注意：reader.onloadend = function 语句必须改为 reader.onloadend = function() {

但是为什么要使用fileReader呢？
例如：我的添加图片到网站的函数如下：

function createImageBase(src, alt) {
    var image = document.createElement('img');
    image.src = src;
    image.alt = alt;
    return image;
}
function addPicture(targetID, imageSRC){
   var location = document.getElementById(targetID);
   var image = createImageBase(imageSRC, imageSRC);
   location.appendChild(image);
}

然后只需要像这样调用它：
Display

0
0 Comments 

function myFunction() {
    var file = document.getElementById('file').files[0];
    var reader  = new FileReader();
    // it's onload event and you forgot (parameters)
    reader.onload = function(e)  {
        var image = document.createElement("img");
        // the result image data
        image.src = e.target.result;
        document.body.appendChild(image);
     }
     // you have to declare the file loading
     reader.readAsDataURL(file);
 }

http://jsfiddle.net/Bwj2D/11/ 的工作示例

0