JavaScript本地预览图片功能

      JavaScript本地预览图片功能 

        <div class="upload_img">
            <!--显示图片 -->
            <div class="head_img">
            <c:if test="${not empty bean.vipImg}">
                 <img src="${bean.vipImg}"  height="150" width="160" id="vipImgshowimg" style="border-radius: 5px;">     
            </c:if> 
            <c:if test="${ empty bean.vipImg}">
                 <img src="webpage/weixin/starCoinFore/images/head_img.png"  height="150" width="160" id="vipImgshowimg" style="border-radius: 5px;">     
            </c:if> 
       </div>
            
            <!--上传图片表单提交--> 
            <div id="dianjirange">
            <form  id="uploadPicForm" action="starCoinForeController.do?uploadPic&id=${bean.id}" method="post"  target="targetIframe" enctype="multipart/form-data">    
            <input type="file" id ="vipImg" onchange="previewImage(this, this.value)" name="imagefile">
            <p class="touxiang">上传头像</p>
            </form>
            </div> 
            </div>

==================================================================================================================================

        <script>
       //本地预览图片    @auther css
    
    function previewImage(file, fileUrl){
    //debugger;
      var jpgTypes = fileUrl.split("."); //以.  分拆 文件名  和 文件格式
      var jpgName =jpgTypes[0];  //文件名
      
 if(jpgTypes[jpgTypes.length-1] == 'jpg' || jpgTypes[jpgTypes.length-1] == 'png' || jpgTypes[jpgTypes.length-1] == 'JPG'|| jpgTypes[jpgTypes.length-1] == 'PNG'){
         var imageId = file.id;  // type="file" input的 id
         var imgSelect = imageId+"showimg";   // 显示图片img的id 
         if (window.FileReader){
             var img = document.getElementById(imgSelect);
             var reader = new FileReader();
             reader.onload = function(evt){img.src = evt.target.result;}
             reader.readAsDataURL(file.files[0]);
           //   alert(imageId);
         }
         else if (document.all) {//IE8-
  
  file.select();
  var reallocalpath = document.selection.createRange().text;
 
  if (window.ie6) {
    var pic = document.getElementById(imgSelect);
    pic.src = reallocalpath;      
  }   
 }
 else if (file.files) {//firefox6-
  if (file.files.item(0)) {
     url = file.files.item(0).getAsDataURL();
     var pic = document.getElementById(imgSelect);
     pic.src = url;
     //alert("oh");
  }
}
// addloadimg("图片正在上传，请稍后！");
 $("#uploadPicForm").get(0).submit(); //真正到后台上传图片  , 预览图片时，就上传了文件。

 
}  else {
//alert("您上传的照片格式不正确，请上传.JPG、.PNG格式的图片，谢谢！");
   $('#dialogBox .dialogBox_main').text("您上传的照片格式不正确，请上传.JPG、.PNG格式的图片，谢谢！");
                    mask.show('dialogBox');
}
    
    }
       </script>