Javascript implémente l'effet d'aperçu de l'image de téléchargement du fichier d'entrée-js tutoriel-php.cn

Javascript implémente l'effet d'aperçu de l'image de téléchargement du fichier d'entrée

高洛峰

Libérer： 2016-12-28 16:48:27

original

1150 Les gens l'ont consulté

L'exemple de cet article présente le code détaillé de javascript pour obtenir l'effet d'aperçu de l'image de téléchargement du fichier d'entrée. Il est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant

Opération de rendu :

javascript实现input file上传图片预览效果

Code d'implémentation spécifique :

<!DOCTYPE html>
<html>
 
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 
 <style type="text/css">
  .imgbox,.imgbox1
  {
   float: left;
   margin-right: 20px;
   margin-top: 20px;
   position: relative;
   width: 182px;
   height: 142px;
   border: 1px solid red;
   overflow: hidden;
  }
  .imgbox1{border: 1px solid blue;
  }
 
 
  .imgnum{
   left: 0px;
   top: 0px;
   margin: 0px;
   padding: 0px;
  }
  .imgnum input,.imgnum1 input {
   position: absolute;
   width: 182px;
   height: 142px;
   opacity: 0;
  }
  .imgnum img,.imgnum1 img {
   width: 100%;
   height: 100%;
  }
  .close,
  .close1 {
   color: red;
   position: absolute;
   left: 170px;
   top: 0px;
   display: none;
  }
 
 
 
 
 
 </style>
</head>
 
<body>
<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 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 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 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 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 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 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 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 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 class="imgbox1">
 <div class="imgnum">
  <input type="file" class="filepath1" />
  <span class="close1">X</span>
  <img src="btn.png" class="img11" />
  <img src="" class="img22" />
 </div>
</div>
 
</div>
 
</body>
<script type="text/javascript">
 $(function() {
  $(".filepath").on("change",function() {
   alert($(&#39;.imgbox&#39;).length);
   var srcs = getObjectURL(this.files[0]); //获取路径
   $(this).nextAll(".img1").hide(); //this指的是input
   $(this).nextAll(".img2").show(); //fireBUg查看第二次换图片不起做用
   $(this).nextAll(&#39;.close&#39;).show(); //this指的是input
   $(this).nextAll(".img2").attr("src",srcs); //this指的是input
   $(this).val(&#39;&#39;); //必须制空
   $(".close").on("click",function() {
    $(this).hide();  //this指的是span
    $(this).nextAll(".img2").hide();
    $(this).nextAll(".img1").show();
   })
  })
 })
 
 
 
 
 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
 };
 
 
 
 
 
 $(function() {
  $("#img").on("change",".filepath1",function() {
   //alert($(&#39;.imgbox1&#39;).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=&#39;<div class="imgbox1">&#39;+
     &#39;<div class="imgnum1">&#39;+
     &#39;<input type="file" class="filepath1" />&#39;+
     &#39;<span class="close1">X</span>&#39;+
     &#39;<img src="btn.png" class="img11" />&#39;+
     &#39;<img src="&#39;+srcs+&#39;" class="img22" />&#39;+
     &#39;</div>&#39;+
     &#39;</div>&#39;;
 
   $(this).parent().parent().before(htmlImg);
   $(this).val(&#39;&#39;); //必须制空
   $(this).parent().parent().prev().find(".img11").hide(); //this指的是input
   $(this).parent().parent().prev().find(&#39;.close1&#39;).show();
 
   $(".close1").on("click",function() {
    $(this).hide();  //this指的是span
    $(this).nextAll(".img22").hide();
    $(this).nextAll(".img11").show();
    if($(&#39;.imgbox1&#39;).length>1){
     $(this).parent().parent().remove();
    }
 
   })
  })
 })
 
</script>
 
</html>

Copier après la connexion

J'espère que cet article sera utile à tout le monde pour apprendre la programmation javascript.

Pour plus d'implémentation javascript des effets d'aperçu de l'image de téléchargement de fichier d'entrée, veuillez faire attention au site Web PHP chinois !