JavaScript에서 진행 표시줄을 사용하여 파일 업로드 기능을 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 진행 표시줄을 사용하여 파일 업로드 기능을 구현하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-10-21 10:07:47

원래의

722명이 탐색했습니다.

JavaScript 如何实现带进度条的文件上传功能？

JavaScript에서 진행률 표시줄을 사용하여 파일 업로드 기능을 구현하는 방법은 무엇입니까?

현대 웹 개발에서는 파일 업로드가 일반적인 작업입니다. 사용자 경험을 개선하려면 진행 표시줄이 있는 파일 업로드 기능을 추가해야 합니다. 이 기사에서는 JavaScript를 사용하여 진행률 표시줄이 있는 파일 업로드 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 프런트 엔드 페이지 레이아웃

먼저 프런트 엔드 페이지에 파일 선택 버튼, 진행률 표시줄, 업로드 버튼이 포함된 레이아웃을 구축해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>带进度条的文件上传</title>
</head>
<body>
    <h1>带进度条的文件上传</h1>
    <input type="file" id="fileInput">
    <progress id="progressBar" value="0" max="100"></progress>
    <button onclick="uploadFile()">上传</button>
</body>
</html>

로그인 후 복사

위 코드에서는 요소를 사용하여 파일 선택 버튼을 만들고, 요소를 사용하여 진행률 표시줄을 만들고, 버튼을 사용하여 업로드 작업을 실행합니다.

2. JavaScript는 업로드 기능을 구현합니다

다음으로 JavaScript를 사용하여 파일 업로드 기능을 구현하고 업로드 프로세스 중에 진행률 표시줄을 실시간으로 업데이트합니다.

function uploadFile() {
    var fileInput = document.getElementById("fileInput");
    var file = fileInput.files[0];
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);

    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            var percentComplete = Math.round((e.loaded / e.total) * 100);
            var progressBar = document.getElementById("progressBar");
            progressBar.value = percentComplete;
        }
    }, false);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("上传完成");
        }
    };

    xhr.send(file);
}

로그인 후 복사

위 코드에서는 먼저 파일 선택 버튼의 요소를 가져와서 선택한 파일을 가져옵니다. 그런 다음 XMLHttpRequest 객체를 생성하고 POST 요청에 대한 URL을 지정합니다. 여기서는 실제 상황에 따라 자신의 백엔드 인터페이스 주소로 변경해야 합니다.

다음으로 업로드 프로세스 중에 진행 이벤트를 수신하여 업로드 비율을 계산하고 진행률이 업데이트될 때마다 진행률 표시줄의 값을 업데이트합니다.

요청의 ReadyState가 4(요청 완료)로 변경되고 상태가 200(요청 성공)이 되면 파일 업로드가 완료된 것을 확인할 수 있습니다.

3. 파일 업로드의 백엔드 처리

위 코드는 프론트엔드에서 파일 업로드 로직만 처리하며 해당 처리는 백엔드에서 수행되어야 합니다. 여기서는 Node.js를 예로 들어 Express 프레임워크를 사용하여 파일 업로드 요청을 처리하고 파일을 서버에 저장합니다.

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), function (req, res, next) {
    // 文件上传成功后的处理逻辑
    console.log(req.file);
});

로그인 후 복사

이 코드에서는 먼저 Express 및 multer 모듈을 소개하고 multer 미들웨어를 사용하여 파일 업로드 요청을 처리합니다. multer는 파일 업로드를 위한 대상 디렉터리를 "uploads/"로 구성하고 upload.single('file')을 사용하여 "file"이라는 파일을 수신합니다.

파일이 성공적으로 업로드되면 콘솔에서 req.file 객체를 인쇄할 수 있습니다. 이 객체에는 파일 이름, 파일 크기 등과 같은 업로드된 파일에 대한 관련 정보가 포함되어 있습니다.

4. 요약

위의 코드 예제를 통해 진행률 표시줄이 있는 파일 업로드 기능을 성공적으로 구현했습니다. 프런트엔드 부분에서는 업로드 프로세스 중 진행 이벤트를 모니터링하고 진행률 표시줄의 값을 실시간으로 업데이트하는 데 JavaScript가 사용됩니다. 백엔드 부분에서는 Express Framework와 Multer Middleware를 통해 파일 업로드 요청을 처리하고, 파일을 서버에 저장합니다.

실제 프로젝트에서 사용해야 한다면 실제 상황에 맞게 코드를 수정해주세요. 이 글이 빠르고 편리한 파일 업로드 기능을 구현하는 데 도움이 되기를 바랍니다.

위 내용은 JavaScript에서 진행 표시줄을 사용하여 파일 업로드 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!