mutiple-image-upload-preview-demo.html

<form name="form5" id="form5" method="post" action="#">
  <input type="file" name="file5" id="file5" multiple onchange="preview5()"/>
</form>
<script type="text/javascript">
  function getFileURL(file){
    if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
      return window.webkitURL.createObjectURL(file);
    }else {
      return window.URL.createObjectURL(file);
    }
  }

  function previewFileId(file) {
    return file.name.replace(/[ \.]/g,"_");
  }

  function preview5(){
    var element = document.getElementById("file5");
    if(!element || !element.value) return;
    var patn = /\.jpg$|\.jpeg$|\.gif$/i;
    if(patn.test(element.value)){
      var files = element.files
      for(var i = 0; i < files.length; i ++ ){
        var image = document.getElementById(previewFileId(files[i]));
        if(image){
          image.src = getFileURL(file[i]);
        }else{
          var img = document.createElement("img");
          img.setAttribute("src", getFileURL(files[i]));
          // img.setAttribute("src", window.URL.createObjectURL(x.files[0]))
          img.setAttribute("width","120");
          img.setAttribute("height","120");
          img.setAttribute("id", previewFileId(files[i]));
          document.getElementById("form5").appendChild(img);
        }
      };
    }else{
      alert("您选择的似乎不是图像文件。");
    }
  };
</script>