Html 从将图像加载到

发布于09月28日

我正在try 加载用户通过元素 Select 的图像.

我向输入元素添加了一个onchange事件处理程序，如下所示:

<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>

PREVIEW_2函数为:

var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}

其中outImage具有我希望加载新图片的标记的id值.

但是，onload似乎从未发生过，并且它没有向html加载任何内容.

我该怎么办？

推荐答案

在支持File API的浏览器中，一旦用户 Select 了文件，就可以使用FileReader构造函数来读取文件.

实例

document.getElementById('picField').onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById(outImage).src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }

    // Not supported
    else {
        // fallback -- perhaps submit the input to an iframe and temporarily store
        // them on the server until the user's session ends.
    }
}