基于HTML5 FileReader创建图片上传预览图

最新推荐文章于 2023-08-03 10:57:00 发布

Cam大少爷

最新推荐文章于 2023-08-03 10:57:00 发布

阅读量708

点赞数 2

分类专栏：精彩世界文章标签： HTML5 FileReader 预览图上传

精彩世界专栏收录该内容

64 篇文章

订阅专栏

哈哈哈今天和一个90后小哥学了一个缩略图的东东。。。。js搞定的。。。。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 FileReader</title>
</head>
<body>
<center>
<input type="file" id="file" οnchange="readAsDataURL()">
<div id="thumb"></div>

<script type="text/javascript">
    // 判断浏览器是否支持 FileReader
    if (typeof FileReader == 'undefined') {
        console.error('你的浏览器不支持FileReader属性');
    }

    var selector = document.getElementById('file');

    // 将文件读取为DataURL
    function readAsDataURL() {
        var file = selector.files[0];
        // 检测是否为图片类型
        if (!/image\/\w+/.test(file.type)) {
            console.error('选择的文件不是图片');
            return false;
        }

        var reader = new FileReader();

        // 注意，readAsDataURL 读取文件是没有返回值的
        reader.readAsDataURL(file);

        // 文件读取完毕执行
        reader.onload = function (data) {
            // 获取到文件路径
            var data_url = data.currentTarget.result;
            document.getElementById('thumb').innerHTML='<img src="'+data_url+'" width="100px" height="180px">';
        }
    }
</script>
</center>
</body>
</html>

小哥的博客网址为这个https://www.zrong.me/archives/139.html 。。。。