h5使用FileReader读取本地上传的图片文件并显示到浏览器

来源:赵克立博客 分类: HTML5 标签:CanvasHTML5js函数canvas发布时间:2016-11-28 10:05:15最后更新:2019-11-17 12:08:39浏览:7258
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2019-11-17 12:08:39
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

blob.png

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>h5使用FileReader读取本地图片文件并显示到浏览器-赵克立博客</title>
    <meta name="keywords" content="h5使用FileReader读取本地图片文件并显示到浏览器-赵克立博客" />
    <meta name="description" content="h5使用FileReader读取本地图片文件并显示到浏览器-赵克立博客" />
</head>
<body>
    <input type="file" id="file_input" name="img" />
    <div id="showimg">
    </div>
    <script type="text/javascript">
    ! function(a, b) {
        var showimg = document.getElementById("showimg");
        var imginput = document.getElementById("file_input");
        if (typeof FileReader === 'undefined') {
            showimg.innerHTML = "抱歉,你的浏览器不支持 FileReader";
            imginput.setAttribute('disabled', 'disabled');
        } else {
            imginput.addEventListener('change', function() {
                var file = this.files[0];
                if (!/image\/\w+/.test(file.type)) {
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    showimg.innerHTML = '<img src="' + this.result + '" alt=""/>'
                }
            }, false);
        }
    }(window);
    </script>
</body>
</html>



微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python