js 이미지 업로드 및 미리 보기 기능 구현

본 고 는 js 가 이미지 업로드 와 미리 보 기 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
사고방식:이 기능 을 완성 하려 면 먼저 사진 을 올 리 는 단 추 를 미화 한 다음 에라벨 을 추가 하고,사진 을 올 린 후,원래라벨 의 src 를 새 그림 의 src 로 교체 해 야 한다.
다음 그림 에서 보 듯 이 원본 단추 스타일 입 니 다.

미화 절차:
(1)업로드 이미지 라벨 은 절대적 인 포 지 셔 닝 을 사용 하여 그림,버튼,div 등 태그 에 위치 하도록 합 니 다.또는 그림,단추,div 에 절대 위 치 를 설정 합 니 다.한 마디 로 파일 업로드 단 추 를 사용자 가 지정 한 단추 와 겹 치 게 해 야 합 니 다.
(2)업로드 이미지 탭 에 겹 치 는 그림,단추,div 등 태그 크기 와 일치 하도록 큰 크기 를 설정 합 니 다.
(3)이 탭 을 투명 하 게 설정 합 니 다:opacity:0;
아래 그림 에서 보 듯 이 두 가지 미화 후의 업로드 버튼 입 니 다.

다음은 그림 미리 보기 기능,절차:
(1)먼저,src 가 비어 있 거나 기본 그림 으로 정의 해 야 합 니 다.
(2)src 가 비어 있 으 면 정 의 된 img 를 투명 하 게 설정 합 니 다:opacity:0;투명 하지 않 으 면 그림 의 표지 가 나타 나 아름 답지 않 습 니 다.
(3)사진 올 리 기 를 클릭 한 후 올 린 그림 의 src 를 가 져 와 미리 정 의 된에 값 을 부여 하고에 opacity:1 을 설정 합 니 다.
다음은 구체 적 인 코드 예시 입 니 다.
 예시 1:클릭 한 위치 에 그림 을 업로드 합 니 다.(이 예제 에 서 는 AUI 프레임 워 크 를 사 용 했 지만 이 기능 에 영향 을 주지 않 습 니 다.)
HTML 코드:

<div id="imgPreview">
 <div id="prompt3">
 <span id="imgSpan">
     
 <br />
 <i class="aui-iconfont aui-icon-plus"></i>
 <!--AUI      -->
 </span>
 <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
 <!-- vaule      changepic  ，            -->
 </div>
 <img src="#" id="img3" />
</div>

 CSS 코드:

#imgPreview {
 width: 40%;
 height: 180px;
 margin: 10px auto 0px auto;
 border: 1px solid black;
 text-align: center;
}
#prompt3 {
 width: 100%;
 height: 180px;
 text-align: center;
 position: relative;
}
#imgSpan {
 position: absolute;
 top: 60px;
 left: 40px;
}
.filepath {
 width: 100%;
 height: 100%;
 opacity: 0;
}
#img3 {
 height: 100%;
 width: 100%;
 display: none;
}

JS 코드:

function changepic() {
 $("#prompt3").css("display", "none");
 var reads = new FileReader();
 f = document.getElementById('file').files[0];
 reads.readAsDataURL(f);
 reads.onload = function(e) {
 document.getElementById('img3').src = this.result;
 $("#img3").css("display", "block");
 };
}

효 과 는 다음 그림 과 같다.

예시 2:버튼 옆 에 있 는 위치 에 그림 을 올 립 니 다.(이 예제 에 서 는 알 리 바 바 벡터 아이콘 라 이브 러 리 를 사 용 했 지만 이 기능 에 영향 을 주지 않 습 니 다.)
HTML 코드:

<div class="aui-col-xs-3" id="img">
 <svg class="icon bigIcon" aria-hidden="true">
 <use xlink:href="#icon-msnui-add"></use>
 </svg>
 <!--        ，         “+”  -->
 <div class="aui-grid-label">    </div>
 <div id="upImg">
 <input type="file" name="file" id="chooseImage" />
 </div>
 <div id="imgPreview">
 <img src="#" id="cropedBigImg" />
 </div>
</div>

 CSS 코드:

#img {
 float: left;
 margin-left: 20px;
 width: 150px;
 height: 60px;
 }
#upImg {
 position: absolute;
 top: 0px;
 left: 0px;
}
#upImg input {
 width: 70px;
 height: 60px;
 opacity: 0;
}
#imgPreview {
 width: 80px;
 height: 60px;
 position: absolute;
 left: 70px;
 top: 0px;
}
#cropedBigImg{
 width: 100%;
 height: 100%;
 display: none;
}

JS 코드:

$('#chooseImage').on('change', function() {// chooseImage     ，     
 var filePath = $(this).val(), //   input value，        
 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
 src = window.URL.createObjectURL(this.files[0]); //            
 
 //        
 if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
 error_prompt_alert('    ,       ：png/jpg/jpeg');
 return;
 }else{
 $('#cropedBigImg').css('display','block');
 $('#cropedBigImg').attr('src', src); 
 } 
});

효 과 는 다음 그림 과 같다.

 저 는 JS 인턴 입 니 다.계속 공부 하고 계속 발전 합 니 다.선배 님 들 의 비판 과 지 도 를 환영 합 니 다.
JS 에 대해 좀 더 깊이 있 고 체계 적 인 학습 을 하고 싶다 면 자 바스 크 립 트 닌 자 비적 권 의 고전 서적 을 참고 하 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.