<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片预览</title>
</head>
<body>
  <!-- 
    文件上传在现代浏览器是基于FileReader API
    基于浏览器的安全策略，file标签在现在浏览器中已获取不到真实路径。而低版本ie可以获取到真实路径
    
    FileReader有四种读取文件的方式
      1.readAsBinaryString读取为二进制码
      2.readAsDataURL 读取为DataURL
      3.readAsText读取为文本
      4.readAsArrayBuffer 读取为队列缓存
    图片上传后的需求，需要将图片读取为DataURL,DataURL的固定格式，
    例如：data:[文件格式];base64,[文本流base64编码]
      1.jpg格式: data:image/jpeg;base64,/9j/4...
      2.png:data:image/png;base64,iVBORw...
      3.gif:data:image/gif;base64,R0IGOD...
   -->
   <input id="files" type="file" οnchange="previewImage(this,'prvid')",multiple="multiple"/>
   <div id="prvid">预览容器</div>
</body>
<script type="text/javascript">
  function previewImage(file,prvid){
    /*
      file:file控件
      prvid:图片预览容器
    */
    var tip = "Expect jpg or png or gif!";
    var filters = {
        "jpeg":"/9j/4",
        "gif":"R0IGOD",
        "png":"iVBORw"
    };
    var prvbox = document.getElementById(prvid);
    prvbox.innerHTML = "";
    //浏览器支持FileReader
    if(window.FileReader){
      for(var i=0,f;f=file.files[i];i++){
        var fr = new FileReader();
        fr.onload = function(e){
          var src = e.target.result;
          //验证没通过
          if(!validateImg(src)){
            alert(tip);
          }else{
          //验证通过
            showPrvImg(src);
          }
        };
        fr.readAsDataURL(f);
      }
    //浏览器不支持FileReader
    }else{
      if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)){
        alert(tip);
      }else{
        showPrvImg(file.value);
      }
    }
    //验证图片
    function validateImg(data){
      var pos = data.indexOf(",")+1;
      for(var e in filters){
        if(data.indexOf(filters[e])===pos){
          return e;
        }
      }
      return null;
    }
    //展示图片
    function showPrvImg(src){
      var img = document.createElement("img");
      img.src = src;
      prvbox.appendChild(img);
    }
  }
</script>
</html>