HTML5上传图片预览

[ 原创 ] HTML5上传图片预览

栏目：笔记作者：teemo 阅读：（8372）更新于：2016-04-19 19:59

利用HTML5的特性实现本地预览，在HTML5中添加的属性

FileReader

实现代码如下

<html>
<head>
<script>
window.onload=function()
{
    document.getElementById('file').onchange = function(evt) {
    // 浏览器不支持FileReader，则不处理
    if (!window.FileReader) return;
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
                // img 元素
                document.getElementById('previewImage').src = e.target.result;
            };
        })(f);
        reader.readAsDataURL(f);
        }
    }
}
</script>
</head>
<body>
<input type="file" name="" id="file" /><img id="previewImage" style="height:200px;" />
</body>
</html>

效果图为：