【原创】 HTML5上传图片预览
栏目:PHP  作者:隆航  阅读:(1030)

利用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>

效果图为:

blob.png



昵称
邮箱
域名
  记住 通知博主
验证码

  程序相关

站点版本:青春博客-V 2.1.0

开源版本:青春博客-Beta v2.0

 下载  在线支付  在线工具  在线音乐

  随机文章