关于javascript：如何从文件输入中显示图像？


How to display an image from a file input?

本问题已经有最佳答案，请猛点这里访问。

我想选择一个文件并在浏览器上显示图像。
我尝试插入直接图像路径，它工作。

现在的问题是，如何显示的图像？

这是我的代码的样子：

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
    }
}
1
2
<input type=file name=filename id=file>
<button type=button onclick='myFunction()'>Display</button>
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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/工作实例

相关讨论

是carrefull：reader.onloadend = function {
必须是reader.onloadend = function(){

但为什么要使用fileReader？
例如，我的功能是在我的webSite =>中添加图片

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}

然后就这样称呼它：
显示

相关讨论