<script>

function show(f) {

        var rd = new FileReader();//創(chuàng)建文件讀取對(duì)象

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

        rd.readAsDataURL(files);//文件讀取裝換為base64類型

        rd.onloadend = function(e) {

            //加載完畢之后獲取結(jié)果賦值給img

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

        }

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

    }

</script>

關(guān)鍵點(diǎn)：#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>