圖片回顯（上傳前預覽）功能

一、html代碼

<input style="margin-left:9px;" type="file" name="file" class="file" id="file" size="28" οnchange="fileChang(event)" />

<div style="width:282px;height: 281px;margin-top:-20px;">
<img id="bannerImg" name="bannerImg" src="${banner.bannerImg}" alt="廣告圖片" />
</div>

二、js代碼

<script>

function fileChang(e){
for (var i = 0; i < e.target.files.length; i++) {  
                    var file = e.target.files.item(i);
                    if (!(/^image\/.*$/i.test(file.type))) {  
                        continue; //不是圖片 就跳出這一次循環  
                    }  
                    //實例化FileReader API  
                    if(file.size<500*1024){
                 var freader = new FileReader();  
                 freader.readAsDataURL(file);  
                freader.onload = function(e) {  
                    $("#bannerImg").attr("src",e.target.result); 
                    //該code是獲得圖片屬性，可以刪除
                      //var img = document.getElementById("bannerImg");  
                    //img.src = e;  
                    //alert("Width:"+img.width+", Height:"+img.height+",size:"+file.size);
                }  
              }else{
                    alert("圖片大小必須小於500K");

                    $("#file").val("");
               }
            }
}

</script>