JS 에서 FileReader 류 는 파일 업로드 와 미리 보기 기능 을 실현 합 니 다.

FileReader 는 H5 브 라 우 저 에서 만 지원 하 는 JS 클래스 입 니 다.H5de 브 라 우 저 를 지원 하지 않 으 면 FormData 클래스 를 사용 하여 파일 업로드 미리 보 기 를 할 수 있 습 니 다.다음 블 로 그 를 참고 하 십시오JS 에서 FormData 클래스 구현 파일 업로드

코드:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>        </title>
</head>
<body>
 <input type="file" id="file">
 <img src="" id="preview">

 <script>
 var file = document.querySelector('#file');
 var priview = document.querySelector("#preview");
 //         
 file.onchange = function () {
 var reader = new FileReader();
 //     
 reader.readAsDataURL(this.files[0])
 reader.onload = function () {
 //              
 priview.src = reader.result;
 }
 }
 </script>
</body>
</html>
더 많은 하 이 라이트 내용 은 주 제 를 참고 하 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기