การอัปโหลดไฟล์นั้นแพร่หลายมากในเว็บแอปพลิเคชันใดๆ และเมื่อต้องอัปโหลดไฟล์และทรัพยากรผ่านทางอินเทอร์เน็ต (บนเบราว์เซอร์) สิ่งต่างๆ อาจทำให้เครียดได้ โชคดีที่มี HTML 5 องค์ประกอบอินพุตซึ่งมักจะมาพร้อมกับการควบคุมฟอร์มเพื่อให้ผู้ใช้สามารถแก้ไขข้อมูลได้จึงสะดวกมากในการลดความซับซ้อนในการอัปโหลดทรัพยากร
ในบทความนี้ เราจะมาดูวิธีจัดการการอัปโหลดไฟล์โดยใช้วานิลลา JavaScript อย่างละเอียดยิ่งขึ้น จุดมุ่งหมายคือเพื่อสอนวิธีสร้างองค์ประกอบการอัปโหลดไฟล์โดยไม่จำเป็นต้องใช้ไลบรารี่ภายนอก และเรียนรู้แนวคิดหลักบางประการใน JavaScript คุณจะได้เรียนรู้วิธีแสดงสถานะความคืบหน้าของการอัปโหลดเมื่อเกิดขึ้น
เริ่มกันเลย!
ตั้งค่าโครงการ
ก่อนอื่น สร้างโฟลเดอร์ใหม่สำหรับโปรเจ็กต์ในไดเร็กทอรีที่คุณต้องการ:
$ mkdir file-upload-progress-bar-javascript
หลังจากทำเช่นนั้นแล้วให้เราสร้าง index.html, main.cssและ app.js ไฟล์ที่เราจะเขียนมาร์กอัปทั้งหมดสำหรับโครงการของเรา
$ touch index.html && touch main.css && touch app.js
ตอนนี้เราสามารถเริ่มสร้างโครงสร้างสำหรับการอัปโหลดไฟล์โดยสร้างเทมเพลต HTML พื้นฐานด้วย และ Tags:
<!DOCTYPE html>
<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>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
ต่อไป เราเพิ่มสไตล์พื้นฐานสำหรับโครงการใน main.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
เพื่อปรับปรุงรูปลักษณ์ของแอปพลิเคชันของเรา เราจะใช้ไอคอนจากไลบรารีแบบอักษรที่ยอดเยี่ยม ซึ่งเราสามารถเพิ่มในโครงการของเราผ่านรหัสชุดที่สามารถสร้างได้ที่เว็บไซต์ไลบรารีแบบอักษรที่ยอดเยี่ยมอย่างเป็นทางการ
ตอนนี้ index.html มีการปรับปรุงและ main.css ไฟล์ถูกเชื่อมโยง:
<!DOCTYPE html>
<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" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css">
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
เราดำเนินการต่อโดยสร้างโครงสร้างสำหรับผู้อัปโหลดไฟล์:
<!DOCTYPE html>
<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" />
<script
src="https://kit.fontawesome.com/355573397a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body>
<div class="file-upload__wrapper">
<header>File Uploader JavaScript with Progress</header>
<div class="form-parent">
<form action="#" class="file-upload__form">
<input class="file-input" type="file" name="file" hidden />
<i class="fas fa-cloud-upload-alt"></i>
<p>Browse File to Upload</p>
</form>
<div>
<section class="progress-container"></section>
<section class="uploaded-container"></section>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
จากนั้นคัดลอก/วางโค้ดต่อไปนี้เพื่ออัปเดต main.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #cb67e9;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
}
::selection {
color: white;
background: #cb67e9;
}
.file-upload__wrapper {
width: 640px;
background: #fff;
border-radius: 5px;
padding: 35px;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.05);
}
.file-upload__wrapper header {
color: #cb67e9;
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
.form-parent {
display: flex;
align-items: center;
gap: 30px;
justify-content: center;
}
.file-upload__wrapper form.file-upload__form {
height: 150px;
border: 2px dashed #cb67e9;
cursor: pointer;
margin: 30px 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: 6px;
padding: 10px;
}
form.file-upload__form :where(i, p) {
color: #cb67e9;
}
form.file-upload__form i {
font-size: 50px;
}
form.file-upload__form p {
font-size: 1rem;
margin-top: 15px;
}
section .row {
background: #e9f0ff;
margin-bottom: 10px;
list-style: none;
padding: 15px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 6px;
}
section .row i {
font-size: 2rem;
color: #cb67e9;
}
section .details span {
font-size: 1rem;
}
.progress-container .row .content-wrapper {
margin-left: 15px;
width: 100%;
}
.progress-container .details {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
}
.progress-container .content .progress-bar-wrapper {
height: 10px;
width: 100%;
margin-bottom: 5px;
background: #fff;
border-radius: 30px;
}
.content .progress-bar .progress-wrapper {
height: 100%;
background: #cb67e9;
width: 0%;
border-radius: 6px;
}
.uploaded-container {
overflow-y: scroll;
max-height: 230px;
}
.uploaded-container.onprogress {
max-height: 160px;
}
.uploaded-container .row .content-wrapper {
display: flex;
align-items: center;
}
.uploaded-container .row .details-wrapper {
display: flex;
flex-direction: column;
margin-left: 15px;
}
.uploaded-container .row .details-wrapper .name span {
color: green;
font-size: 10px;
}
.uploaded-container .row .details-wrapper .file-size {
color: #404040;
font-size: 11px;
}
ตอนนี้ คอมโพเนนต์บนเบราว์เซอร์มีลักษณะดังนี้:
ดูคู่มือเชิงปฏิบัติสำหรับการเรียนรู้ Git ที่มีแนวทางปฏิบัติที่ดีที่สุด มาตรฐานที่ยอมรับในอุตสาหกรรม และเอกสารสรุปรวม หยุดคำสั่ง Googling Git และจริงๆ แล้ว เรียน มัน!
ในการเพิ่มฟังก์ชันที่จำเป็นสำหรับการอัปโหลดในโครงการของเรา ตอนนี้เราใช้ app.js ไฟล์ที่เราเขียนรหัส JavaScript ที่ให้ชีวิตกับโครงการของเรา
คัดลอก/วางสิ่งต่อไปนี้ลงใน app.js:
const uploadForm = document.querySelector(".file-upload__form");
const myInput = document.querySelector(".file-input");
const progressContainer = document.querySelector(".progress-container");
const uploadedContainer = document.querySelector(".uploaded-container");
uploadForm.addEventListener("click", () => {
myInput.click();
});
myInput.onchange = ({ target }) => {
let file = target.files[0];
if (file) {
let fileName = file.name;
if (fileName.length >= 12) {
let splitName = fileName.split(".");
fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
}
uploadFile(fileName);
}
};
function uploadFile(name) {
let xhrRequest = new XMLHttpRequest();
const endpoint = "uploadFile.php";
xhrRequest.open("POST", endpoint);
xhrRequest.upload.addEventListener("progress", ({ loaded, total }) => {
let fileLoaded = Math.floor((loaded / total) * 100);
let fileTotal = Math.floor(total / 1000);
let fileSize;
fileTotal < 1024
? (fileSize = fileTotal + " KB")
: (fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB");
let progressMarkup = `
${name} | Uploading
${fileLoaded}%
`;
uploadedContainer.classList.add("onprogress");
progressContainer.innerHTML = progressMarkup;
if (loaded == total) {
progressContainer.innerHTML = "";
let uploadedMarkup = `
${name} | Uploaded
${fileSize}
`;
uploadedContainer.classList.remove("onprogress");
uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup);
}
});
let data = new FormData(uploadForm);
xhrRequest.send(data);
}
สิ่งที่เราทำคือสามารถอ่านไฟล์ที่เลือกจากการใช้องค์ประกอบอินพุตไฟล์ และสร้างรายการไฟล์ใหม่บน DOM เมื่อกำลังอัปโหลดไฟล์ ระดับความคืบหน้าจะปรากฏขึ้น และเมื่ออัปโหลดไฟล์เสร็จสิ้น สถานะความคืบหน้าจะเปลี่ยนเป็นอัปโหลดแล้ว
จากนั้นเรายังเพิ่ม uploadFile.php ในโครงการของเราเพื่อจำลองปลายทางสำหรับการส่งไฟล์ เหตุผลนี้คือการจำลองอะซิงโครไนซ์ในโครงการของเรา เพื่อให้เราได้รับผลกระทบการโหลดความคืบหน้า
<?php
$file_name = $_FILES['file']['name'];
$tmp_name = $_FILES['file']['tmp_name'];
$file_up_name = time().$file_name;
move_uploaded_file($tmp_name, "files/".$file_up_name);
?>
สรุป
คุณยอดเยี่ยมมากที่ได้มาถึงจุดนี้ของบทความนี้
ในบทช่วยสอนนี้ เราได้เรียนรู้วิธีสร้างองค์ประกอบการอัปโหลดไฟล์และเพิ่มแถบความคืบหน้า สิ่งนี้มีประโยชน์เมื่อคุณสร้างเว็บไซต์และต้องการให้ผู้ใช้รู้สึกมีส่วนร่วมและเข้าใจว่าการอัปโหลดไฟล์ช้าหรือเร็วเพียงใด คุณสามารถใช้โครงการนี้ซ้ำได้หากต้องการ
หากคุณติดขัดระหว่างทำตามบทช่วยสอนนี้ ฉันขอแนะนำให้คุณอัปโหลดโครงการของคุณบน GitHub เพื่อขอความช่วยเหลือจากนักพัฒนารายอื่น หรือคุณสามารถส่ง dm ได้เช่นกัน
นี่คือการเชื่อมโยงไป GitHub repo สำหรับโครงการ.
