在PHP專案開發中，有時候經常需要做新增圖片的功能。新增圖片時，一般需要即時預覽上傳的圖片。下面這個例子就是簡單的預覽上傳圖片功能，程式碼如下（分兩部分）：

1、HTML程式碼：

<div class="c-zt-pic">
   <img id="preview" src="">

</div>
  <div style="margin-bottom: 20px;">
  <input type="file" name="image" id="upload" class="btn btn-edc" value="新增圖片">
  </div>

2、jQuery程式碼

$(function() {

     //預覽上傳圖片
            $('#upload').change(function() {
                var f = document.getElementById('upload').files[0];
                var src = window.URL.createObjectURL(f);
                document.getElementById('preview').src = src;
            });

});

效果以及注意事項如下：