上傳多張圖片 頁面預覽

直接上代碼

 

<div style="float:left;" class="add_image">點擊添加更多圖片</div>
<div class="order_image">
   <div class="upload_image" style="height:auto;">
      <div class="show_image" data-number="0">
         <img width="100%" height="100%" id="id_card_cover" src="/ydb/images/image.png" class="img1"/>
         <img src="/ydb/images/delete.jpg" onclick="removeImages(this)" class="del_images"/>
         <input data-id="id_card_cover" class="img_input" type="file" name="file1" onchange="readFile0(this)"/>
      </div>

   </div>
</div>

 

<script>
   //上傳圖片
function readFile0(obj){
   console.log("1")
   var file = obj.files[0];
   console.log(file)
   if(!/image\/\w+/.test(file.type)){
      return false;
   }

   if(file.size>10480000){
      alert("您的圖片過大，請壓縮後上傳");
      return false;
   }

   var reader = new FileReader();
   reader.readAsDataURL(file);
   var id = $(obj).data("id");

   $("#"+id).attr("src", "/ydb/images/loading.gif");

   reader.onload = function(e){

      $("#"+id).attr("src", this.result);
      $("#"+id).addClass("hasSelectImg");
      addImage();
   }
}

$(".add_image").on("click",function(){
   var img_length = $(".show_image").length;
   var $isAddImage = false;
   $(".img1").each(function(){
      if(!$(this).hasClass("hasSelectImg")){
         $isAddImage = false;
      }else{
         $isAddImage = true;
      }
   })
   if(!$isAddImage){
      return;
   }

   var leng = $(".show_image").length-1;

   var number = $(".show_image:eq("+leng+")").data("number")+1;

   var id_card_cover = "id_card_cover"+number;

   var name = "imageKey"+number;

   var imag = "";
   imag+='<div class="show_image" data-number="'+number+'">';
   imag+='<img  width="100%" height="100%" src="/ydb/images/image.png" id="'+id_card_cover+'" class="img1"/>';
   imag+='<img src="/ydb/images/delete.jpg" onclick="removeImages(this)" class="del_images"/>';
   imag+='<input data-id="'+id_card_cover+'" class="img_input" type="file" name="'+name+'" onchange="readFile0(this)"/></div>';

   $(".upload_image").append(imag);
})

function removeImages(obj){
   var inde = $(obj).index(".del_images");

   var len = $(".del_images").length;

   if(len>1){
      $(".show_image:eq("+inde+")").remove();
      $(".get_image:eq("+inde+")").remove();
   }
}

</script>