上传控件图片直接在页面显示

1、页面元素：

<tr>   
    <td align="left">
      <input type="file" id="picFile" name="picFile" disabled="disabled"/>        
    </td>
  </tr>

<!-- 图片显示区域 -->
    <tr>
      <td colspan="4" align="center">
    <div style="width:98%; height:254px;">
     <input type="hidden" id="imageVal" name="imageVal" value=""/>
        <img id="imagePre" width="100%" height="100%"/>
    </div>
      </td> 
    </tr>

2、js相关代码：

//绑定上传控件   将本地图片转成base64  显示在页面
  $("#picFile").change(function(){
   //验证是否图片
   if(!/image\/\w+/.test(this.files[0].type)){
           alert("文件必须是图片格式!");
           return false;
      }
   //限制图片大小
   var size = this.files[0].size / 1024;   
         if(size>1000){ 
            alert("图片大小不能大于1M!");
            return false;
         }
         //var v = $(this).val();
         var reader = new FileReader();
         reader.readAsDataURL(this.files[0]);
         reader.onload = function(e){
             console.log(e.target.result);
             $("#imageVal").val("");        //清空base46
             $("#imagePre").attr("src", "");   //清空图片
            
             $("#imageVal").val(e.target.result.split(",")[1]);
             $("#imagePre").attr("src", e.target.result);    //将Base64流显示在页面的  img标签中进行浏览
         };
     });