Javascript에서 드래그 앤 드롭 또는 찾아보기 기능을 만드는 방법

7540 단어 incodercsshtmljavascript
안녕하세요 친구 여러분, 오늘 이 블로그에서는 Javascript에서 끌어서 놓기 또는 찾아보기 기능을 만드는 방법을 배웁니다. 이전 블로그에서 how to create button with hover effect like microsoft in HTML, CSS, and Javascript을 보았습니다. 이전에 javascript과 관련된 많은 프로젝트를 공유했으며 원하는 경우 확인할 수 있으며 확인하는 것을 잊지 마십시오 HTML, CSS, and Javascript projects .

드래그 앤 드롭 파일 업로드는 드래그 앤 드롭으로 파일을 업로드할 수 있음을 의미합니다. 끌어서 놓기 인터페이스를 사용하면 웹 응용 프로그램에서 웹 페이지에 파일을 끌어다 놓을 수 있습니다. 대부분의 사이트에서 이러한 유형의 파일 업로드 기능을 보았을 것입니다. 몇 줄의 JavaScript 코드로 이러한 유형의 드래그 앤 드롭 파일 업로드 기능을 생성하는 JavaScript 라이브러리가 많이 있지만 오늘 이 블로그에서는 라이브러리를 사용하지 않고 순수한 JavaScript 수단으로 생성하겠습니다.

다음을 좋아할 수 있습니다.


  • Filterable Image Gallery with preview
  • How to create button to download image
  • How to create custom select input with search option
  • How to create random password generator

    • 이 프로그램 [Drag & Drop or Browse - File upload Feature]의 웹 페이지에는 일부 텍스트, 아이콘 및 찾아보기 파일 버튼이 있는 드롭 영역 컨테이너가 있습니다. 임의의 이미지 파일을 드래그 영역 위로 드래그하면 컨테이너 테두리도 단색으로 변경되고 "Drag & Drop to upload file"텍스트도 "Release to upload file"로 변경되었습니다.

    드래그 영역에서 이미지 파일을 놓으면 해당 이미지의 미리보기가 즉시 나타납니다. 파일 찾아보기 버튼을 클릭하여 이미지를 업로드할 수도 있습니다. 버튼을 클릭하면 파일 창이 열리고 하나의 이미지 파일을 선택해야 합니다. 선택한 후에는 드래그 영역에 나타납니다.

    내가 말하려는 내용을 이해하기 어렵다면 소스 코드를 확인하거나 미리 볼 수도 있습니다.

    미리보기를 사용할 수 있습니다here .

    HTML 코드




    <!DOCTYPE html>
<!-- --------------------- Created By InCoder --------------------- -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag or Drop</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <div class="dragOrDropContainer">
        <div class="icon"><i class="fa-solid fa-cloud-arrow-up"></i></div>
        <div class="header">Drag & Drop to Upload File</div>
        <span>OR</span><br/>
        <button class="browseFile">Browse File</button>
        <input type="file" id="fileInput" hidden>
    </div>

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


    CSS 코드




    /* --------------------- Created By InCoder --------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #de5d60;
}

.dragOrDropContainer{
    color: #fff;
    margin: 1.2rem;
    padding: 1.2rem;
    overflow: hidden;
    text-align: center;
    max-height: 18rem;
    border-radius: .4rem;
    border: 3px dashed #fff;
    width: clamp(18rem, 65vw, 25rem);
}

.dragOrDropContainer img {
    width: 100%;
    height: 100%;
}

.dragOrDropContainer .icon {
    font-size: 5rem;
}

.dragOrDropContainer.uploaded {
    padding: 0;
    max-height: 13.5rem;
}

.dragOrDropContainer.drag {
    border: 3px solid #fff;
}

.dragOrDropContainer.drag .icon {
    animation: upload 1s infinite linear alternate;
}

@keyframes upload {
    0%{
        transform: translateY(0rem);
    }
    100%{
        transform: translateY(-1rem);
    }
}

.dragOrDropContainer .browseFile {
    width: 8rem;
    height: 2rem;
    color: #fff;
    cursor: pointer;
    margin-top: .6rem;
    border-radius: .4rem;
    border: 2px solid #fff;
    background-color: transparent;
    transition: all .2s ease-in-out;
}

.dragOrDropContainer .browseFile:hover {
    color: #de5d60;
    background-color: #fff;
}


    자바스크립트 코드




    // --------------------- Created By InCoder ---------------------

let dragOrDropContainer = document.querySelector('.dragOrDropContainer')
dragBoxText = document.querySelector('.dragOrDropContainer .header')
browseFile = document.querySelector('.browseFile')
fileInput = document.querySelector('#fileInput')

let file

fileInput.addEventListener('change', () => {
    file = fileInput.files[0];
    dragOrDropContainer.classList.add("drag")
    uploadFile()
})

const uploadFile = () => {
    let fileType = file.type;
    dragOrDropContainer.style.cursor = 'progress'
    dragBoxText.innerText = 'Uploading file, Please Wait...'
    let validExt = ["image/jpeg", "image/jpg", "image/png"];
    if (validExt.includes(fileType)) {
        let fileReader = new FileReader()
        fileReader.onload = () => {
            let fileURL = fileReader.result
            dragOrDropContainer.classList.add('uploaded')
            let imageTag = `<img src="${fileURL}" alt="image">`
            dragOrDropContainer.innerHTML = imageTag
            dragOrDropContainer.style.cursor = 'auto'
        }
        fileReader.readAsDataURL(file)
    } else {
        dragOrDropContainer.classList.remove("drag")
        dragBoxText.innerText = "Drag & Drop to Upload File"
        alert("This File is nat valid. Please choose another file and try again.")
    }
}

dragOrDropContainer.addEventListener('dragover', (e) => {
    e.preventDefault()
    dragOrDropContainer.classList.add('drag')
    dragBoxText.innerText = 'Release to Upload File'
})

dragOrDropContainer.addEventListener('dragleave', (e) => {
    dragOrDropContainer.classList.remove('drag')
    dragBoxText.innerText = 'Drag & Drop to Upload File'
})

dragOrDropContainer.addEventListener('drop', (e) => {
    e.preventDefault()
    file = e.dataTransfer.files[0];
    uploadFile()
})

browseFile.addEventListener('click', () => {
    fileInput.click()
})
    CloudWatchLogs 로그를 ElasticSearch로 흘리기
    ES6 Javascript의 루프

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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