檔案上傳預覽

 通常在html中要上傳檔案只要將input type 設定成file就可以了

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

但是............如圖

只會出現檔名,有可能我選擇完就忘了.自己選了什麼相片(相信我.年紀到了就會這樣..)

加上兩段code 就可以解決這個問題了

紅色部份是相片預覽的部份,橘色部份是上傳的部份

<div class="form-group row">

       <div class="col-md-8">

         <img id="ShowPrePic" src="#" alt="your image" style="max-width:300px;max-height:300px;" />

       </div>

        <div class="col-md-4">

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

        </div>

  </div>

<script >

AJpic.onchange = evt => {

            const [file] = AJpic.files

            if (file) {

                ShowPrePic.src = URL.createObjectURL(file)

            }

        }

</script>