FileReader는 사진을 업로드하기 전에 로컬 미리보기를 구현합니다.
- 小云云원래의
- 2018-03-03 09:10:191505검색
이미지를 업로드하고 미리 볼 때 특별한 요구 사항이 없으면 이미지를 배경에 직접 업로드하면 됩니다. 성공 후 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('src', e.target.result);
}
}
}
</script>
</body>
</html>
Postscript
이 사건으로 인해 새로운 것을 배우는 데 있어 문제점 중 하나가 드러났습니다. 이 습관은 특히나 해롭습니다. 앞으로는 질문을 찾을 때마다 그것을 확인해야 할 뿐만 아니라 그것이 무엇인지도 알아야 합니다. 그것이 무엇인지, 왜 그것을 할 수 있는지도 이해해야 합니다. . 또, 평소의 코드를 손으로 쳐서 복사하지 않도록 해볼 수도 있는데, 복사하는 것은 한동안 재미있지만, 손으로 쓸 수 없는 것은 당황스럽습니다.
오늘은 항저우 셋째 날이자 인터뷰 둘째 날입니다. 이틀 간의 인터뷰에서 드러난 중요한 문제는 제가 검색 엔진에 너무 많이 의존하고 너무 적은 두뇌를 사용한다는 것입니다. 몇 가지 간단한 API도 기억나지 않습니다. .. 프론트엔드에는 외워야 할 것들이 정말 많습니다. 지름길은 없습니다. 이것들이 기초가 아니라면 기초가 부족한 것입니다. 물건을 만드는 능력에는 영향을 미치지 않지만, 기술이 발전하려면 이 초석이 안정적이어야 하므로 명심하세요!
관련 권장 사항:
H5의 파일 도메인 FileReader는 어떻게 세그먼트의 파일을 읽고 서버에 업로드합니까?
JavaScript는 FileReader를 사용하여 이미지 업로드 미리 보기 효과를 얻습니다.
FileReader 인터페이스 사용 방법 분석 HTML5
위 내용은 FileReader는 사진을 업로드하기 전에 로컬 미리보기를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!