이미지를 업로드할 때 로컬에서 미리 보는 방법
- php中世界最好的语言원래의
- 2018-03-17 11:53:441974검색
이번에는 사진 업로드 시 로컬 미리보기를 먼저 구현하는 방법을 알려드리겠습니다. 사진 업로드 시 주의해야 할 주의사항은 무엇인가요?
FileReader 개체를 사용하면 웹 응용 프로그램이 File 또는 Blob 개체를 사용하여 읽을 파일이나 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. 아래 글에서는 JS에서 FileRereader로 사진을 업로드하기 전 로컬 미리보기 기능을 소개합니다. 필요한 친구들은
을 참고하세요.
event.target.files
프로젝트를 진행하면서 플러그인을 찾다가 순수 프런트엔드가 이미지의 로컬 미리보기를 실현할 수 있다는 것을 알았습니다. 그런데 오늘 인터뷰에서 질문을 받았을 때 우연히 발견하게 되었습니다. 컴퓨터 데스크탑에 데모를 구현한 후 이를 기반으로 데모에서 API를 확인하고 간략하게 요약했습니다.
먼저 File 객체 를 가져와야 합니다.input 태그를 사용하여 이미지를 업로드할 때, 이벤트 개체에는 파일 개체 모음이 포함됩니다
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 인코딩에 대한 특별 기사를 작성하세요
완전한 코드 <!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>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
위 내용은 이미지를 업로드할 때 로컬에서 미리 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!