2016年9月29日 星期四

[JS]上傳圖片前預覽

程式碼來源 http://ithelp.ithome.com.tw/articles/10164617
這個程式碼只有預覽功能,不能上傳,所以我在底下的DEMO把sumbit按鈕拿掉了

<form id="form1" enctype="multipart/form-data" action="" method="post" >
    <input type='file' id="file" name="file" />
    <div class="preview">
        <img id="blah" src="" alt="your image" />
    </div>
    <input type="submit" value="Submit" class="btnSubmit" />
</form>       
      
<script>
    $(function()
    {
 $("#file").change(function(){
     if (this.files && this.files[0]) {
  var reader = new FileReader();
      reader.onload = function (e) {
          $('#blah').attr('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
  }
     });
 }) ;
</script>

DEMO


your image

沒有留言 :

張貼留言