웹에서 복사-붙여넣기를 통한 파일 입력 구현-JS 튜토리얼-php.cn

웹 개발 영역에서는 사용자 입력을 수집할 때 파일을 업로드하는 방법이 여러 가지가 있습니다. 방법 중 하나는 복사-붙여넣기입니다. 파일 입력용 복사-붙여넣기는 사용자로부터 파일을 업로드하는 매우 직관적인 방법입니다. 복사-붙여넣기 파일 입력 방식은 사용자가 업로드하려는 파일의 위치를 기억할 필요성을 덜어줍니다. 이 글에서는 웹사이트에서 복사-붙여넣기를 통한 파일 입력을 구현하는 방법에 대해 설명합니다.

ClipboadEvent 및 EventTarget 인터페이스를 활용하여 복사-붙여넣기 파일 입력을 구현해 보겠습니다. ClipboardEvent 인터페이스는 붙여넣기 이벤트에 대한 정보를 제공하고 EventTarget 인터페이스를 사용하면 붙여넣기 이벤트를 수신할 수 있습니다.

붙여넣기 이벤트를 들으면서 붙여넣은 항목을 어떻게 처리할지 결정하는 이벤트 핸들러 함수를 첨부하겠습니다. 우리의 경우 붙여넣은 파일을 브라우저에 완전히 로드한 후 즉시 렌더링하겠습니다. HTML과 스타일부터 시작하겠습니다.

HTML과 스타일

붙여넣기 영역의 HTML 마크업을 만드는 것부터 시작해 보겠습니다. 아래 코드 조각은 HTML 마크업입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy-Paste File Input</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div 
        id="pasteArea" 
        contenteditable="true" 
        style="border: 2px dashed #ccc; padding: 20px;"
    >
        Paste your file here
    </div>
    <div id="preview"></div>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

위의 코드 조각은 파일을 붙여넣을 수 있는 직사각형 컨테이너를 렌더링합니다. 컨테이너에는 true로 설정된 contenteditable이라는 속성이 있습니다. contenteditable 속성은 컨테이너에 파일이나 기타 항목을 붙여넣을 수 있도록 하는 데 중요합니다. contenteditable 속성이 false로 변경되거나 제거되면 붙여넣기 작업이 예상대로 작동하지 않습니다. 또한 ID가 미리보기인 컨테이너도 있습니다. 미리보기 컨테이너를 사용하여 사용자가 붙여넣은 이미지를 미리 봅니다.

style.css의 마크업에 몇 가지 기본 스타일을 추가해 보겠습니다

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

로그인 후 복사

위의 마크업과 스타일 시트는 아래 스크린샷과 같이 간단한 프롬프트 텍스트가 있는 간단한 대시 경계 컨테이너를 만듭니다.

Implementing File Input By Copy-Paste on the Web

이제 UI를 만들었으니 다음 섹션에서 JavaScript를 사용하여 몇 가지 유용한 기능을 추가해 보겠습니다.

스크립트

이 섹션에서는 JavaScript를 사용하여 붙여넣기 영역에 붙여넣기 이벤트 리스너를 추가하겠습니다. 이벤트 리스너를 연결하기 위해 DOM에서 붙여넣기 영역을 가져오기 전에 먼저 아래 코드 조각과 같이 DOM 콘텐츠가 로드될 때까지 기다립니다.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

로그인 후 복사

위의 코드 조각에서는 DOMContentLoaded 이벤트에 대한 리스너를 추가했습니다. 이를 통해 DOM 요소를 가져오기 전에 DOM 트리가 생성될 때까지 기다릴 수 있습니다. 다음으로 붙여넣기 영역 컨테이너를 선택하고 여기에 붙여넣기 이벤트 리스너를 추가합니다.

붙여넣은 항목에서 파일 가져오기

이전 코드 조각에서는 붙여넣기 이벤트 핸들러가 구현되지 않은 상태로 남아 있었습니다. 이벤트 객체에서 데이터를 가져와서 콘솔에 기록하여 구현해 보겠습니다. 기사 뒷부분에서 데이터를 사용하여 더 많은 작업을 수행할 것입니다. 지금은 항목을 붙여넣기 영역에 붙여넣을 때 파일이 수신되는지 확인하려고 합니다. 아래 코드 조각은 붙여넣기 이벤트 핸들러의 최소 구현을 보여줍니다.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

로그인 후 복사

위의 코드 조각에서는 event.clipboardData 개체에서 항목을 가져옵니다. event.clipboardData.items는 붙여넣은 항목의 내용을 포함하는 목록형 객체인 DataTransferItemList입니다. 사용자가 한 번에 여러 항목을 복사하여 붙여넣을 수 있으므로 항목은 목록에 저장됩니다.

다음으로 for ...of 루프를 사용하여 항목을 반복합니다. 루프에서는 각 항목이 파일인지 확인합니다. 항목이 '파일' 왕인 경우 파일로 가져와서 브라우저 콘솔에 인쇄합니다.

콘솔에 파일 정보를 인쇄하는 것은 웹 페이지 사용자에게 그다지 유용하지 않습니다. 다음 섹션에서는 좀 더 흥미로운 작업을 해보겠습니다.

업로드된 파일 미리보기

클립보드에 항목을 붙여넣은 후 아무데도 표시하지 않으면 사용자가 파일 업로드가 성공했는지 알기 어려울 것입니다. 성공을 나타내는 내용을 표시하여 파일이 성공적으로 업로드되었음을 나타내는 것이 중요합니다. 업로드된 파일 자체를 표시하는 것보다 업로드 성공을 나타내는 더 좋은 방법이 있을까요?

이 섹션에서는 붙여넣기 이벤트 핸들러를 확장하여 수신된 파일에서 URL을 생성합니다. 파일이 브라우저에 로드되면 생성된 URL을 사용하여 파일을 렌더링합니다. FileReader API를 활용하여 아래 스니펫에 코딩된 대로 파일에서 URL을 생성하겠습니다.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

로그인 후 복사

위의 코드 조각에서는 FileReader의 인스턴스를 생성하고 이를 사용하여 데이터 URL을 생성했습니다. 또한 읽기 결과를 콘솔에 기록하는 FileReader 객체에 loadend 이벤트 리스너를 추가했습니다. 이는 파일 미리보기를 위한 첫 번째 단계입니다. 이제 URL을 사용하여 파일을 표시할 수 있습니다.

Assuming the user pasted image files, the following code snippet shows how we can extend the event handler to create a URL and display the image file.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

로그인 후 복사

In the code snippet above, we get the preview container from the DOM and create an img element for rendering the image. We assign the created URL as the src of the image and append the image to the preview container. Once the image is appended to the preview container, the user can now know that the image they pasted was successfully loaded into the web page.

Success! We have successfully implemented file uploads by copy-paste on a webpage. This method of file upload gives users the privilege of uploading files easily without the need to click several buttons to select the file to be uploaded. The ClipboadEvent interface provides an easy way to collect data from items pasted on the browser. The FileReader interface allows us to create a URL from the uploaded file and use it to preview the uploaded file.

Feel free to say something in the comment section. Find more about the ClipBoardEvent and the FileReader interfaces from MDN.

위 내용은 웹에서 복사-붙여넣기를 통한 파일 입력 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!