집 >웹 프론트엔드 >JS 튜토리얼 >FileReader는 사진을 업로드하기 전에 로컬 미리보기를 구현합니다.

FileReader는 사진을 업로드하기 전에 로컬 미리보기를 구현합니다.

php中世界最好的语言원래의: 2018-04-12 14:53:291550검색

이번에는 이미지 업로드 전 FileReader 로컬 미리보기 구현에 대해 소개하겠습니다. 이미지 업로드 전 FileReader 로컬 미리보기 구현에 대한 주의 사항은 다음과 같습니다.

소개

이미지를 업로드하고 미리 볼 때 특별한 요구 사항이 없으면 먼저 이미지를 배경으로 직접 전송할 수 있습니다. 성공 후 URL을 가져온 다음 페이지에 렌더링할 수 있습니다. 이렇게 하면 이미지가 있을 때 문제가 발생하지 않습니다. 상대적으로 작지만 크면 속도가 느려지므로 미리보기도 볼 수 있고, 정크 파일도 생성되므로 업로드하기 전에 로컬에서 미리보는 것이 좋습니다.

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

먼저 파일 개체를 가져와야 합니다

input 태그를 사용하여 이미지를 업로드하면 이벤트 개체에 파일 개체 컬렉션이 포함됩니다

event.target.files

핵심은 FileReader 개체입니다

MDN에 따르면:

FileReader 객체를 사용하면 웹 애플리케이션이 읽을 파일이나 데이터를 지정하는 File 또는 Blob 객체를 사용하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다.

먼저 FileReader의 인스턴스 객체를 constructor

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 인코딩에 대한 특별 기사를 작성하겠습니다

완전한 코드

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form action=""> 
 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"> 
 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px"> 
 </form>
 <script>
 function changImg(e){ 
 var myImg = document.getElementById('myImg');
 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>
</body>
</html>

포스트스크립트

이 사건은 새로운 것을 배우는 데 있어 나의 문제점 중 하나를 노출시켰습니다. 이 습관은 앞으로는 질문을 찾을 때마다 확인만 하는 것이 아닙니다. 예, 소위 그것이 무엇인지, 왜 그렇게 할 수 있는지 이해해야 합니다. 또 한가지는 코드를 손으로 쳐서 복사하지 않으려고 노력하는 것인데, 복사하는 것은 한동안 재미있지만, 손으로 쓸 수 없는 것은 당황스럽습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!