JS实现可视化文件上传

<style type="text/css">    .imgbox,.imgbox1    {      position: relative;      width: 200px;      height: 180px;      border: 1px solid #ddd;      overflow: hidden;    }     .imgnum{      left: 0px;      top: 0px;      margin: 0px;      padding: 0px;    }    .imgnum input,.imgnum1 input {      position: absolute;      width: 200px;      height: 180px;      opacity: 0;    }    .imgnum img,.imgnum1 img {      width: 100%;      height: 100%;    }    .close,    .close1 {      color: red;      position: absolute;      right: 10px;      top: 0;      display: none;    }</style>

<div id="img">  <div class="imgbox"> <div class="imgnum">  <input type="file" class="filepath" />  <span class="close">X</span>  <img src="btn.png" class="img1" />  <img src="" class="img2" /> </div> </div> </div>

<script type="text/javascript">  $(function() {    $(".filepath").on("change",function() {      var srcs = getObjectURL(this.files[0]);  //获取路径      $(this).nextAll(".img1").hide();     //this指的是input      $(this).nextAll(".img2").show();     //fireBUg查看第二次换图片不起做用      $(this).nextAll('.close').show();     //this指的是input      $(this).nextAll(".img2").attr("src",srcs);  //this指的是input      $(this).val('');               //必须制空      $(".close").on("click",function() {        $(this).hide();             //this指的是span        $(this).nextAll(".img2").hide();        $(this).nextAll(".img1").show();      })    })  })   //关键代码：getObjectURL return url  function getObjectURL(file) {    var url = null;    if (window.createObjectURL != undefined) {      url = window.createObjectURL(file)    } else if (window.URL != undefined) {      url = window.URL.createObjectURL(file)    } else if (window.webkitURL != undefined) {      url = window.webkitURL.createObjectURL(file)    }    return url  }; //modify img  $(function() {    $("#img").on("change",".filepath1",function() {      //alert($('.imgbox1').length);      var srcs = getObjectURL(this.files[0]);  //获取路径      alert(srcs);      //this指的是input      /* $(this).nextAll(".img22").attr("src",srcs);  //this指的是input       $(this).nextAll(".img22").show(); //fireBUg查看第二次换图片不起做用*/      var htmlImg='<div class="imgbox1">'+          '<div class="imgnum1">'+          '<input type="file" class="filepath1" />'+          '<span class="close1">X</span>'+          '<img src="btn.png" class="img11" />'+          '<img src="'+srcs+'" class="img22" />'+          '</div>'+          '</div>';       $(this).parent().parent().before(htmlImg);      $(this).val('');            //必须制空      $(this).parent().parent().prev().find(".img11").hide();  //this指的是input      $(this).parent().parent().prev().find('.close1').show();       $(".close1").on("click",function() {        $(this).hide();          //this指的是span        $(this).nextAll(".img22").hide();        $(this).nextAll(".img11").show();        if($('.imgbox1').length>1){          $(this).parent().parent().remove();        }       })    })  }) </script>