집 >웹 프론트엔드 >JS 튜토리얼 >FileReader는 이미지를 업로드하기 전에 로컬로 미리 봅니다.

FileReader는 이미지를 업로드하기 전에 로컬로 미리 봅니다.

小云云원래의: 2018-03-05 09:43:321057검색

FileReader 개체를 사용하면 웹 응용 프로그램이 File 또는 Blob 개체를 사용하여 읽을 파일이나 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기식으로 읽을 수 있습니다. 이미지를 업로드하고 미리 볼 때 특별한 요구 사항이 없으면 먼저 이미지를 배경으로 직접 전송할 수 있습니다. 성공 후 URL을 가져온 다음 페이지에 렌더링할 수 있습니다. 이렇게 하면 이미지가 있을 때 문제가 발생하지 않습니다. 상대적으로 작지만 크면 속도가 느려지므로 미리보기도 볼 수 있고, 정크 파일도 생성되므로 업로드하기 전에 로컬에서 미리보는 것이 좋습니다.

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

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

입력 태그가 포함된 이미지를 업로드하면 이벤트 개체에 컬렉션이 포함됩니다. 파일 객체 중

event.target.files

핵심은 FileReader 객체입니다

MDN에 따르면:

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

먼저 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 인코딩에 대한 기사

전체 코드

<!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>

Postscript

이 사건으로 인해 새로운 것을 배우는 데 있어 문제점 중 하나가 드러났습니다. 이 습관은 특히나 해롭습니다. 앞으로는 질문을 찾을 때마다 그것을 확인해야 할 뿐만 아니라 그것이 무엇인지도 알아야 합니다. 그것이 무엇인지, 왜 그것을 할 수 있는지도 이해해야 합니다. . 또 한가지는 코드를 손으로 쳐서 복사하지 않으려고 노력하는 것인데, 복사하는 것은 한동안 재미있지만, 손으로 쓸 수 없는 것은 당황스럽습니다.

오늘은 항저우 셋째 날이자 인터뷰 둘째 날입니다. 이틀 간의 인터뷰에서 드러난 중요한 문제는 제가 평소에 검색 엔진에 너무 많이 의존하고 너무 적은 두뇌를 사용한다는 것입니다. 실제로 프론트엔드에는 외워야 할 것이 많습니다. 지름길은 없습니다. 이러한 것들은 기본이 아닙니다. 물건을 만드는 능력에는 영향을 미치지 않지만, 개발 효율성에는 영향을 미치게 됩니다. 기술이 발전하려면 이 초석이 안정적이어야 하므로 명심하세요!

FileReader는 이미지를 업로드하기 전에 로컬로 미리 봅니다.

관련 기사