前端图片预览

杨恺俞

于 2019-01-21 19:38:14 发布

阅读量328

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_38894162/article/details/86583109

版权

前端专栏收录该内容

3 篇文章

订阅专栏

在前端实现图片上传查看
css标签：

    <input type="file" name="inputfile" accept="image/*" onchange="readFile(this.files[0])">
    <div id="preview"></div>

JavaScript代码：

    function readFile(f) {
        document.getElementById('preview').innerHTML = '';
        var reader = new FileReader();
        reader.readAsDataURL(f); //base64编码
        reader.onload = function () {
            var preview = document.querySelector('#preview');
            var img = document.createElement("img");
            img.src = reader.result;
            preview.appendChild(img);
        };
        reader.onerror = function (e) {
            console.log("Error" + e);
        }
    }