javascript - html file 上传后如何在旁边显示上传的图片

问题描述

问 题

<input type="file" id="file" name=""  />


<div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
                <img src="__PUBLIC__/images/tu.png" />    
                </div>

上传图片后如何实时 预览

解决方案

谢邀吧，我尽量把要说的写简单一点：

首先，我假设你有一个标签input用来选择图片，还有一个img标签用来预览，html大致如下：

<input id="imgPicker" type="file" />
<img id="preview" />

然后，我们需要监听input标签的change事件，用来观察用户是否选中了图片，并且图片是什么，代码大致如下：

document
    .querySelector('#imgPicker')
    .addEventListener('change', function(){
        //当没选中图片时，清除预览
        if(this.files.length === 0){
            document.querySelector('#preview').src = '';
            return;
        }
        
        //实例化一个FileReader
        var reader = new FileReader();

        reader.onload = function (e) {
            //当reader加载时，把图片的内容赋值给
            document.querySelector('#preview').src = e.target.result;
        };

    //读取选中的图片，并转换成dataURL格式
    reader.readAsDataURL(this.files[0]);
    }, false);

这篇关于javascript - html file 上传后如何在旁边显示上传的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！