HTML 文件图像不会显示

Posted 2023-04-17

【中文标题】HTML 文件图像不会显示

【英文标题】：HTML File Image won't show up

【发布时间】：2013-04-09 14:33:51

【问题描述】：

我基本上是在尝试获取预览图像，并且我一直在做一些研究并关注其他人的代码，但由于某种原因我的图像不会显示，谁能告诉我为什么它不会显示？

HTML 代码

<input type="file" accept="image/*;capture=camera" id="myfile" name="myfile">
<output name="image" id="list"> </output>

JavaScript

<script>
function handleFileSelect(evt) 
    var files = evt.target.files; // FileList object, files[0] is your file
    var f = files[0];
    var reader = new FileReader();

    reader.onload = (function(theFile) 
       return function(e) 
           document.getElementById('list').innerhtml = ['<img src="', e.target.result,'" title="', theFile.name, '"  />'].join('');
       ;
    )(f);

    reader.readAsDataURL(f);
    

    document.getElementById('myfile').addEventListener('change', handleFileSelect, false);
    </script>

如果有人能告诉我我做错了什么，将不胜感激！ 谢谢

【问题讨论】：

我使用的资源：@​​987654321@Using HTML5 APICapture Images with with HTML5Native Camera App HTML5

【参考方案1】：

您的代码看起来运行良好。 看一看： http://jsbin.com/atekeh

也许您使用的是没有文件 API 的浏览器？

【讨论】：

我也有同样的想法，但是当我使用这些示例时，它工作得很好。在同一个浏览器上...即使您的链接也有效！

【参考方案2】：

显然，放置 javascript 的位置很重要。我所要做的就是将 javascript 移到输出下方，它现在可以正常工作了！

【讨论】：

把脚本放在哪里并不重要，为了工作，必须确保文档已经加载。如果您像这样包装事件侦听器： window.onload = function() document.getElementById('myfile').addEventListener('change', handleFileSelect, false);你可以让你的功能正常工作：看看更新的 jsbin jsbin.com/atekeh/3