图片回显（上传前预览）功能

一、html代码

<input style="margin-left:9px;" type="file" name="file" class="file" id="file" size="28" onchange="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>