이미지를 업로드할 때 로컬에서 미리 보는 방법

이번에는 사진 업로드 시 로컬 미리보기를 먼저 구현하는 방법을 알려드리겠습니다. 사진 업로드 시 주의해야 할 주의사항은 무엇인가요?

FileReader 개체를 사용하면 웹 응용 프로그램이 File 또는 Blob 개체를 사용하여 읽을 파일이나 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. 아래 글에서는 JS에서 FileRereader로 사진을 업로드하기 전 로컬 미리보기 기능을 소개합니다. 필요한 친구들은

을 참고하세요.

event.target.files

下 업로드 및 미리보기 시 배경으로 이동하여 성공 후 URL을 가져온 후 페이지에 렌더링합니다. 이미지가 상대적으로 작을 경우 미리보기가 느려지므로 문제가 되지 않습니다. 정크 파일도 생성되므로 업로드하기 전에 로컬에서 미리 보는 것이 좋습니다.

프로젝트를 진행하면서 플러그인을 찾다가 순수 프런트엔드가 이미지의 로컬 미리보기를 실현할 수 있다는 것을 알았습니다. 그런데 오늘 인터뷰에서 질문을 받았을 때 우연히 발견하게 되었습니다. 컴퓨터 데스크탑에 데모를 구현한 후 이를 기반으로 데모에서 API를 확인하고 간략하게 요약했습니다.

먼저 File 객체

를 가져와야 합니다.

input 태그를 사용하여 이미지를 업로드할 때, 이벤트 개체에는 파일 개체 모음이 포함됩니다

핵심은 FileReader 개체입니다

MDN에 따르면:

FileReader 개체를 사용하면 웹 응용 프로그램에서 파일 내용(또는 원시 데이터)을 비동기적으로 읽을 수 있습니다. 읽을 내용을 지정하기 위해 File 또는 Blob 개체를 사용하여 사용자 컴퓨터에 저장됩니다.

먼저

constructor

로서 FileReader의 인스턴스 객체를 가져와야 합니다

var freader = new FileReader();

readAsDataURL() 메서드를 사용하여 지정된 콘텐츠를 읽습니다

freader.readAsDataURL(file);

마지막으로

이벤트 처리입니다. 읽기 진행 상황을 모니터링합니다. 읽기가 완료되면 이미지가 렌더링되므로 onload

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

를 사용하세요. 프레임이 로드된 후 최종적으로 얻는 것은 base64로 인코딩된 src 주소입니다. 구체적인 이유는 다음번에 알아보겠습니다. 그런 다음 base64 인코딩에 대한 특별 기사를 작성하세요

완전한 코드

nbsp;html>


 <meta>
 <title>Document</title>


 

         

 <script> function changImg(e){ var myImg = document.getElementById(&#39;myImg&#39;); for (var i = 0; i < e.target.files.length; i++) { var file = e.target.files[i]; console.log(file); if (!(/^image\/.*$/i.test(file.type))) { continue; //不是图片 就跳出这一次循环 } //实例化FileReader API var freader = new FileReader(); freader.readAsDataURL(file); freader.onload = function(e) { console.log(e); myImg.setAttribute(&#39;src&#39;, e.target.result); } } } </script> 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

🎜추천 자료: 🎜🎜🎜자동 업데이트 및 자동 획득을 위한 쿠키 만료 설정🎜🎜🎜🎜🎜가져오기를 사용하고 JS를 패키지하도록 요구🎜🎜🎜🎜🎜select의 옵션 오버레이를 처리하는 방법🎜🎜

위 내용은 이미지를 업로드할 때 로컬에서 미리 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!