FileReader는 사진을 업로드하기 전에 로컬 미리보기를 구현합니다.-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-03-03 09:10:19

원래의

1517명이 탐색했습니다.

이미지를 업로드하고 미리 볼 때 특별한 요구 사항이 없으면 이미지를 배경에 직접 업로드하면 됩니다. 성공 후 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

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

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

JavaScript는 FileReader를 사용하여 이미지 업로드 미리 보기 효과를 얻습니다.

FileReader 인터페이스 사용 방법 분석 HTML5

위 내용은 FileReader는 사진을 업로드하기 전에 로컬 미리보기를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!