1. 程式人生 > >上傳圖片,圖片回顯預覽

上傳圖片,圖片回顯預覽

<div class="form-group">                 <label class="control-label col-sm-3" for="add_file"><font color="red">*</font>封面:</label>                 <div class="col-sm-9" >                     <input type="file" class="form-control" onchange="changeFile()" id="add_file" name="file"/>                     <li><font color="black" size= "2">請上傳jpg或png格式的圖片,1080*608,圖片大小不超過200k</font></li>                 </div>             </div>             <div class="form-group" style="display:none" id="showDiv">                 <label class="control-label col-sm-3" for="show_icon"></label>                 <div class="col-sm-9" id="addShowDiv">                     <img src="" width="300px" height="90px" id="show_icon"/>                 </div>             </div>

 //新增的時候圖片預覽         function changeFile() {             /* var src =$("#show_icon")[0].src;             alert(src); */               var r= new FileReader();               f=document.getElementById('add_file').files[0];               if(!f){                   document.getElementById('show_icon').src="";                   document.getElementById("showDiv").style.display="none";               }               r.readAsDataURL(f);               r.onload=function (e) {                   document.getElementById("showDiv").style.display="";                   document.getElementById('show_icon').src=this.result;                 }           }