javascript - HTML 文件图像不会显示

Question

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

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, '" width="50" />'].join('');
       };
    })(f);

    reader.readAsDataURL(f);
    }

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

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

Answer 1

您的代码看起来工作正常。看看：http: //jsbin.com/atekeh

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

Answer 2

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