多个单图进行预览

多个独立的图片上传，进行预览操作：

html:

根据input的onchange改变事件，进行预览图片：

<div class="cardImgId">
    <input type="file" id="imageUrl03" onchange="showImg('imageUrl03','photoImg03')" required lay-verify="required" class="cardImg"/>  
    <img src="images/yulan.png" id="photoImg03" alt=""/>   //图片预览的位置
</div>

js:
<script>
    function showImg(fileid,target){   //给2个参数，其他位置的参数名一致，值就进去了
        var preview = document.querySelector('#'+target);   //获取img元素,显示图片位置，根据el表达式('#'+target)
        var file = document.querySelector('#'+fileid).files[0];   //根据id拿到文件选择框里面的文件，
        var reader = new FileReader();   //创建FileReader接口（把文件放到图片预览框里面）
        reader.onloadend = function () {
            preview.src = reader.result;
        }
        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }
</script>

预览效果如图：