input 图片上传选择图片后显示缩略图

<script>

function show(f) {

        var rd = new FileReader();//创建文件读取对象

        var files = f.files[0];//获取file组件中的文件

        rd.readAsDataURL(files);//文件读取装换为base64类型

        rd.onloadend = function(e) {

            //加载完毕之后获取结果赋值给img

            document.getElementById("book-pic").src = this.result;

        }

        $("#book-pic").css("display","inline-block").siblings(".imga").css("display","none");

    }

</script>

关键点：#book-pic; .imga

    <div class="input-box">

            <div class="label">行驶证照片</div>

            <div class="input">

              <label class="upload-input imga">

                <input type="file" class="inputfile" accept="image/*" name="zheng"  id="book-file" onchange="show(this)"/>

                <div class="upload-btn">正本上传</div>

              </label><img id="book-pic2" src="/book/img/book-list/article/${book.image}.jpg" style="display:none;width:50px;height:50px;">

              <label class="upload-input img">

                <input type="file" class="inputfile" accept="image/*" name="fu"  id="book-file3" onchange="show3(this)"/>

                <div class="upload-btn">副本上传</div>

              </label><img id="book-pic3" src="/book/img/book-list/article/${book.image}.jpg" style="display:none;width:50px;height:50px;">

            </div>

          </div>