您的位置：首页 > Web前端 > JavaScript

input 上传图片预览实现

2015-04-22 19:00 281 查看

关于HTML中input type="file"上传图片预览的问题，在网上找了好久，有人说Chrome不能获取文件的绝对路径，也就没办法实现本地预览，必须先上传，再显示服务器的资源，但是这样的话，服务器会接收很多没用的文件。我觉得，不是不能实现，而是我们还没有找到合适的方法。

经过不断的努力，找到了一篇文章，实现了本地预览，不过试了之后发现在IE浏览器上不支持（后面再看看怎么实现吧）。

开始没有明白怎么实现预览的，用完之后回头再看，原来是作者使用了HTML5中的API ：FileReader，可以用来读取文件，知道了这个再看代码就好理解了，

不考虑兼容性的话，可以直接使用下面的代码：

<html>

<body>

<input type="file" onchange="preView(this)"/>

<br/>

<span>预览</span><br/>

<img id="img_upload" src="" width="100" />

</body

</html>

<script>
function preView(file){
var img = document.getElementById("img_upload");
var reader = new FileReader();
reader.onload = function(evt) {
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： upload html javascript api

相关文章推荐

新的分享

章节导航