Base64 인코딩을 사용하여 HTML 양식에서 파일을 업로드하는 방법

17047 단어 htmlbase64tutorialjavascript
Base64 인코딩을 사용하여 파일을 업로드하는 것이 일반적입니다. 이 가이드에서는 base64 인코딩을 사용하여 파일을 업로드하는 방법을 보여드리겠습니다.

Base64 인코딩이란 무엇입니까?


Base64 Encoding는 바이너리 데이터를 텍스트로 변환하여 저장하거나 전송하는 데 가장 널리 사용되는 기술입니다. 이 기법을 사용하면 기본적으로 8비트 바이트로 구성된 이진 데이터를 6비트(2^6 = 64) 부분으로 나눕니다. 6비트로 표현된 64개의 서로 다른 숫자는 ASCII 문자 집합에서 인쇄 가능한 문자로 표현된 64개의 서로 다른 문자와 일치합니다.

Base64 인코딩은 MIME(Multipurpose Internet Mail Extensions) 표준 응용 프로그램에서 전자 메일에 이진 파일을 첨부하는 데 가장 일반적으로 사용됩니다.

Base64 인코딩의 또 다른 사용 영역은 최신 브라우저에서 데이터 URL 형식을 사용하여 Base64로 인코딩하여 HTML 및 CSS 문서에 이미지 및 기타 파일을 추가하는 것입니다.

예시



이 예에서는 이미지를 Base64로 인코딩하여 이미지 파일을 업로드합니다. 먼저 간단한 HTML을 작성하고 Bootstrap CSS 링크를 설정해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="./index.css" />
        <link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <title>Base64 File Upload</title>
    </head>

    <body>
        <div style="margin: 24px">
            <h2>Upload Image</h2>
        </div>

        <script src="./index.js"></script>
    </body>
</html>


그런 다음 HTMLinput 태그를 사용하여 사용자로부터 이미지 파일을 받아야 합니다.

수신하려는 입력 유형 파일이어야 하므로 file input를 사용합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./index.css" />
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Base64 File Upload</title>
  </head>
  <body>
    <div style="margin: 24px">
      <h2>Upload Image</h2>
    </div>
    <div style="margin: 16px; padding: 16px">
      <input
        class="form-control form-control-lg"
        id="selectAvatar"
        type="file"
      />
    </div>
</html>


이제 사용자와 상호 작용하고 파일을 선택할 수 있는 입력이 있습니다. 사용자로부터 받은 이미지 파일과 Base64 코드를 표시할 HTML 요소를 추가해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="./index.css" />
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
        <link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />

        <title>Base64 File Upload</title>
    </head>
    <body>
        <div style="margin: 24px">
            <h2>Upload Image</h2>
        </div>

        <div style="margin: 16px; padding: 16px">
            <input
                class="form-control form-control-lg"
                id="selectAvatar"
                type="file"
            />
        </div>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h6>Image Preview:</h6>
                    <img class="img" id="avatar" />
                </div>
                <div class="col">
                    <h6>Base64 Output</h6>
                    <textarea id="textArea" rows="30" cols="50"></textarea>
                </div>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>




필드는 이미지 파일과 Base64 코드를 표시할 준비가 되었습니다. 이제 JavaScript 쪽에서 작업을 수행해 보겠습니다.

const input = document.getElementById("selectAvatar");
const avatar = document.getElementById("avatar");
const textArea = document.getElementById("textAreaExample");

const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);

        fileReader.onload = () => {
            resolve(fileReader.result);
        };

        fileReader.onerror = (error) => {
            reject(error);
        };
    });
};

const uploadImage = async (event) => {
    const file = event.target.files[0];
    const base64 = await convertBase64(file);
    avatar.src = base64;
    textArea.innerText = base64;
};

input.addEventListener("change", (e) => {
    uploadImage(e);
});


여기서는 파일 형식의 데이터를 가져와 Base64로 인코딩합니다. 그런 다음 이 인코딩된 이미지와 Base64 인코딩 출력을 보여줍니다.



View Live Codesandbox Example

React 웹 프레임워크를 보고 계십니까?



데이터 집약적인 애플리케이션을 즉시 구축하기 위한 React 기반 프레임워크입니다. 정제는 극단적인 사용자 정의 기능을 손상시키지 않으면서 신속한 개발을 위해 즉시 사용 가능한 많은 기능을 제공합니다. 사용 사례에는 관리자 패널, B2B 애플리케이션 및 대시보드가 ​​포함되지만 이에 국한되지 않습니다.

⚙️ 제로 구성: 슈퍼플레이트로 한 줄 설정. 프로젝트를 시작하는 데 1분도 걸리지 않습니다.

📦 즉시 사용 가능: 라우팅, 네트워킹, 인증, 상태 관리, i18n 및 UI.

🔌 백엔드 불가지론: 모든 맞춤형 백엔드에 연결합니다. REST API, Strapi, NestJs CRUD, Airtable, Supabase, Appwrite 및 Altogic을 기본적으로 지원합니다.

📝 Native Typescript Core: 일반 JavaScript는 언제든지 옵트아웃할 수 있습니다.

🔘 분리된 UI : UI 구성 요소가 캡슐화되지 않고 직접 노출됩니다. UI 요소를 완전히 제어할 수 있습니다.

🐜 강력한 기본 UI: 통합 Ant Design System과 원활하게 작동합니다. (여러 UI 프레임워크에 대한 지원은 로드맵에 있습니다)

📝 상용구 없는 코드: 코드베이스를 깨끗하고 읽기 쉽게 유지합니다.

Refer to the refine documentation for more information. →

Refine으로 Base64를 업로드하는 방법은 무엇입니까?



정제를 사용한 Base64 파일 업로드 프로세스는 매우 간단합니다. 사용 방법은 가이드와 예제에서 단계별로 설명됩니다.

Refer to the refine Base64 Upload guide for more information. →

View Source

Refine Base64 Upload Live Codesandbox Example
Bot Framework Composer에서 미들웨어 구현
Vagrant에서 Ubuntu (GUI)의 개발 환경을 만들어 보았습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage