이미지를 업로드할 때 로컬에서 미리 보는 방법
이번에는 사진 업로드 시 로컬 미리보기를 먼저 구현하는 방법을 알려드리겠습니다. 사진 업로드 시 주의해야 할 주의사항은 무엇인가요?
FileReader 개체를 사용하면 웹 응용 프로그램이 File 또는 Blob 개체를 사용하여 읽을 파일이나 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. 아래 글에서는 JS에서 FileRereader로 사진을 업로드하기 전 로컬 미리보기 기능을 소개합니다. 필요한 친구들은
을 참고하세요.
event.target.files
프로젝트를 진행하면서 플러그인을 찾다가 순수 프런트엔드가 이미지의 로컬 미리보기를 실현할 수 있다는 것을 알았습니다. 그런데 오늘 인터뷰에서 질문을 받았을 때 우연히 발견하게 되었습니다. 컴퓨터 데스크탑에 데모를 구현한 후 이를 기반으로 데모에서 API를 확인하고 간략하게 요약했습니다.
먼저 File 객체 를 가져와야 합니다.input 태그를 사용하여 이미지를 업로드할 때, 이벤트 개체에는 파일 개체 모음이 포함됩니다
MDN에 따르면:
FileReader 개체를 사용하면 웹 응용 프로그램에서 파일 내용(또는 원시 데이터)을 비동기적으로 읽을 수 있습니다. 읽을 내용을 지정하기 위해 File 또는 Blob 개체를 사용하여 사용자 컴퓨터에 저장됩니다.
먼저
constructor로서 FileReader의 인스턴스 객체를 가져와야 합니다var freader = new FileReader();
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7529
15
1378
52
81
11
54
19
21
75
소다 음악에 현지 음악을 추가하는 방법
Feb 23, 2024 pm 07:13 PM
Soda Music에 지역 음악을 추가하는 방법 Soda Music APP에 좋아하는 지역 음악을 추가할 수 있지만 대부분의 친구들은 지역 음악을 추가하는 방법을 모릅니다. 다음은 Soda Music에 지역 음악을 추가하는 방법에 대한 그래픽 튜토리얼입니다. 편집자 여러분, 관심 있는 사용자가 와서 살펴보세요! 소다 음악 사용에 대한 튜토리얼 소다 음악에 로컬 음악을 추가하는 방법 1. 먼저 소다 음악 앱을 열고 메인 페이지 하단의 [음악] 기능 영역을 클릭합니다. 오른쪽 하단에 있는 [점 3개] 아이콘 3. 마지막으로 아래 기능 표시줄을 확장하고 [다운로드] 버튼을 선택하여 로컬 음악에 추가합니다.
PHP에서 로컬로 저장한 후 워터마크를 추가하고 원격 이미지를 저장하는 방법은 무엇입니까?
Jul 11, 2023 pm 11:48 PM
PHP에서 로컬로 저장한 후 워터마크를 추가하고 원격 이미지를 저장하는 방법은 무엇입니까? PHP 개발에서 원격 이미지를 로컬에 저장해야 하는 경우가 종종 있습니다. 때로는 저작권을 보호하거나 추가 정보를 추가하기 위해 저장된 이미지에 워터마크를 추가해야 할 수도 있습니다. 이 기사에서는 PHP를 사용하여 원격 사진을 로컬에 저장하고 저장된 사진에 워터마크를 추가하는 방법을 소개합니다. 1. 원격 이미지를 로컬에 저장하려면 먼저 PHP의 파일 작업 기능을 사용하여 원격 이미지를 로컬에 저장해야 합니다. 다음은 간단한 예제 코드입니다: &
Vue에서 이미지 스크롤 및 썸네일 미리보기를 구현하는 방법은 무엇입니까?
Aug 18, 2023 pm 01:51 PM
Vue에서 이미지 스크롤 및 썸네일 미리보기를 구현하는 방법은 무엇입니까? Vue 프로젝트에서는 많은 수의 사진을 표시해야 하는 경우가 많으며 사용자가 이러한 사진을 쉽게 탐색하고 미리 볼 수 있기를 바랍니다. 이 글에서는 Vue 컴포넌트를 사용하여 이미지 스크롤 및 썸네일 미리보기 기능을 구현하는 방법을 소개합니다. 먼저, 이미지 스크롤과 썸네일 미리보기를 용이하게 하기 위해 적절한 Vue 라이브러리를 설치하고 도입해야 합니다. 이 예에서는 vue-awesome-swiper 및 vue-image-preview 두 라이브러리를 사용하여 구현합니다.
향후 기능에 대한 조기 액세스 Safari 기술 미리보기 173 출시
Jul 02, 2023 pm 01:37 PM
Apple은 오늘 Safari 17에서 출시될 수 있는 일부 기능을 포함하는 Safari Technology Preview 버전 173을 출시했습니다. 이 버전은 macOS Sonoma 베타 버전과 macOS Ventura 시스템에 적합합니다. 관심 있는 사용자는 공식 웹사이트에서 다운로드할 수 있습니다. Safari Technology Preview 버전 173은 설정에 기능 플래그 블록을 추가하여 원래 개발 메뉴의 실험적 기능을 대체합니다. 이 섹션에서는 개발자가 특정 기능을 빠르게 검색하고 다양한 방식으로 상태를 "안정적", "테스트 가능", "미리 보기" 또는 "개발자"로 표시할 수 있습니다. 새롭게 디자인된 개발 메뉴를 통해 제작자는 웹 페이지, 웹 앱, 다른 앱의 웹 콘텐츠를 구축하기 위한 주요 도구를 더 쉽게 찾을 수 있습니다.
하얼빈 의과대학 임상약학 취업에 미래가 있나요? (하얼빈 의과대학 임상약학 취업 전망은 어떻습니까?)
Jan 02, 2024 pm 08:54 PM
하얼빈 의과대학 임상약학 취업 전망은 어떻습니까? 전국 취업 상황이 낙관적이지는 않지만 약학 졸업생의 취업 전망은 여전히 좋습니다. 전반적으로 제약산업 졸업생의 공급은 수요보다 적다. 제약회사와 제약공장은 이러한 졸업생을 흡수하는 주요 통로이기도 하다. 보도에 따르면 최근 몇 년간 조제약품, 천연의약화학 등 전공 대학원생의 수급비율은 1:10에 달하기도 했다. 임상약학전공 취업방향: 임상의학을 전공하는 학생은 졸업 후 의료보건학과, 의학연구 및 기타 학과에서 진료, 예방, 의학연구 등에 종사할 수 있습니다. 채용 직위: 의료 담당자, 제약 영업 담당자, 영업 담당자, 영업 관리자, 지역 영업 관리자, 투자 관리자, 제품 관리자, 제품 전문가, 간호사
Vue 양식 처리에서 양식 이미지 업로드 및 미리보기를 구현하는 방법
Aug 10, 2023 am 11:57 AM
Vue 양식 처리에서 양식 이미지 업로드 및 미리보기를 구현하는 방법 소개: 최신 웹 애플리케이션에서 양식 처리는 매우 일반적인 요구 사항입니다. 일반적인 요구 사항 중 하나는 사용자가 이미지를 업로드하고 양식에서 미리 볼 수 있도록 허용하는 것입니다. 프런트엔드 프레임워크인 Vue.js는 이러한 요구 사항을 충족하기 위한 풍부한 도구와 방법을 제공합니다. 이 기사에서는 Vue 양식 처리에서 이미지 업로드 및 미리보기 기능을 구현하는 방법을 보여 드리겠습니다. 1단계: Vue 구성 요소 정의 먼저 Vue 그룹을 정의해야 합니다.
Win11 APK 설치 가이드
Jan 03, 2024 pm 10:24 PM
우리 모두 알고 있듯이 Microsoft는 win11에서 Android 애플리케이션을 실행하고 로컬 apk를 설치할 수 있다고 발표했습니다. 그러나 win11을 업데이트한 후 사용자는 로컬 apk를 설치하는 방법을 몰랐다는 사실을 발견했습니다. 아직 win11에서는 이 기능을 구현하지 않았습니다. 이 기능을 사용하려면 먼저 해당 기능이 설치될 때까지 기다려야 합니다. win11에서 로컬 apk를 설치하는 방법: 1. Microsoft에 따르면 win11이 이 기능을 설치한 후 다운로드한 apk 파일을 직접 두 번 클릭하여 직접 설치할 수 있습니다. 2. 설치가 완료된 후 사용자는 시스템에서 직접 실행할 수도 있습니다. 3. 현재는 win11의 공식 버전이지만 Microsoft에서는 아직 win11에 대해 이 기능을 구현하지 않았습니다. 4. 그래서 사용자가 win11을 사용하고 싶다면
Vue를 통해 이미지를 업로드하고 미리 보는 방법은 무엇입니까?
Aug 19, 2023 pm 09:25 PM
Vue를 통해 이미지를 업로드하고 미리 보는 방법은 무엇입니까? 개요: 최신 웹 애플리케이션에서는 이미지 업로드 및 미리보기가 일반적인 요구 사항입니다. 널리 사용되는 JavaScript 프레임워크인 Vue는 이 기능을 구현하는 편리한 방법을 제공합니다. 이 기사에서는 Vue를 사용하여 프런트 엔드 인터페이스 디자인 및 백엔드 인터페이스 처리를 포함하여 이미지를 업로드하고 미리 보는 방법을 소개합니다. 프런트엔드 인터페이스 디자인: 먼저 이미지를 선택하고 업로드할 프런트엔드 인터페이스를 디자인해야 합니다. Vue에서는 <i를 사용할 수 있습니다.
