将图像从<输入文件加载到<img>>

javascript html

2022-08-30 04:50:39

我正在尝试加载用户通过元素选择的图像。

我向输入元素添加了一个 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中。

我该怎么办？

答案 1

在支持文件 API 的浏览器中，一旦用户选择了文件，就可以使用 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.
    }
}

浏览器支持

IE 10
野生动物园 6.0.2
铬 7
火狐 3.6
歌剧 12.02

如果文件 API 不受支持，则无法（在大多数注重安全的浏览器中）从文件输入框中获取文件的完整路径，也无法访问数据。唯一可行的解决方案是将表单提交到隐藏的 iframe，并将文件预上传到服务器。然后，当该请求完成时，您可以将图像的src设置为上传文件的位置。

答案 2

正如iEamin在他的回答中所说，HTML 5现在确实支持这一点。他给出的链接，http://www.html5rocks.com/en/tutorials/file/dndfiles/，非常好。下面是基于该站点的样本的最小样本，但有关更全面的示例，请参阅该站点。

将事件侦听器添加到 HTML：onchange

<input type="file" onchange="onFileSelected(event)">

制作一个带有id的图像标签（我指定以确保图像在屏幕上不会太大）：height=200

<img id="myimage" height="200">

这是事件侦听器的 JavaScript。它采用作为传递的对象，构造 a 以读取其内容，并设置一个新的事件侦听器以将生成的 URL 分配给标记：onchangeFileevent.target.files[0]FileReaderdata:img

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("myimage");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}