집 > 기사 > 웹 프론트엔드 > Javascript는 입력 파일 업로드 이미지 미리보기 효과를 구현합니다.

Javascript는 입력 파일 업로드 이미지 미리보기 효과를 구현합니다.

高洛峰원래의: 2016-12-28 16:48:271123검색

본 글의 예시는 입력 파일 업로드 이미지의 미리보기 효과를 구현하기 위한 자바스크립트의 상세 코드를 소개하고 있으며, 참고용으로 모두에게 공유합니다.

작업 렌더링:

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

구체 구현 코드:

<!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>

이 글이 자바스크립트 프로그래밍을 배우는 모든 분들에게 도움이 되기를 바랍니다.

입력 파일 업로드 이미지 미리보기 효과에 대한 추가 자바스크립트 구현을 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：JavaScript 학습요약(1) 기본편다음 기사：JavaScript 학습요약(1) 기본편

Javascript는 입력 파일 업로드 이미지 미리보기 효과를 구현합니다.

관련 기사