jQuery 이미지 업로드 전 미리 보기 기능 구현

인터넷 상에 서 많은 코드 가 사진 업로드 기능 을 실 현 했 지만 실시 간 미리보기 기능 은 지원 되 지 않 습 니 다.다음은 사진 업로드 전 미리보기 효과 기능 을 실 현 했 습 니 다.구체 적 으로 다음 과 같 습 니 다.
효과 그림:

코드 는 다음 과 같 습 니 다:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery            </title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<input id="file" ;="" onchange="c()" type="file"><br>
<img src="" id="show" width="200"><script>
function c () {
  var r= new FileReader();
  f=document.getElementById('file').files[0];
  
  r.readAsDataURL(f);
  r.onload=function (e) {
    document.getElementById('show').src=this.result;
  };
}</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기