ファイルのアップロードは、どの Web アプリケーションでも非常に広く行われており、インターネット (ブラウザー) 上でファイルやリソースをアップロードする場合、多少のストレスがかかることがあります。幸いなことに、HTML 5 では、通常、ユーザーがデータを変更できるようにフォーム コントロールに付属する入力要素が、リソースのアップロードを簡素化するのに非常に便利になります。
この記事では、バニラ JavaScript を使用してファイルのアップロードを処理する方法を詳しく説明します。目的は、外部ライブラリを必要とせずにファイル アップロード コンポーネントを構築する方法を教え、また JavaScript のいくつかの核となる概念を学ぶことです。また、アップロードの進行状況をその都度表示する方法も学習します。
ソース コード: いつものように、プロジェクトの GitHub リポジトリにホストされているソース コードをいじることができます。
まず、任意のディレクトリに、プロジェクト用の新しいフォルダーを作成します。
$ mkdir file-upload-progress-bar-javascript
これを完了したら、プロジェクトのすべてのマークアップを書き込む、index.html、main.css、app.js ファイルを作成しましょう。
$ touch index.html && touch main.css && touch app.js
ここで、
を含む基本的な 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" />
<title>File Upload with Progress Bar using JavaScript</title>
</head>
<body></body>
</html>
次に、main.css にプロジェクトの基本スタイルを追加します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
アプリケーションの外観を向上させるために、フォント 素晴らしい ライブラリのアイコンを利用します。このアイコンは、フォント 素晴らしい ライブラリの公式 Web サイトで作成できるキット コードを通じてプロジェクトに追加できます。
これで、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;
}
これで、コンポーネントはブラウザ上でより良く見えるようになります:
プロジェクトにアップロードに必要な機能を追加するために、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 = `<li class="row">
<i class="fas fa-file-alt"></i>
<div class="content-wrapper">
<div class="details-wrapper">
<span class="name">${name} | <span>Uploading</span></span>
<span class="percent">${fileLoaded}%</span>
</div>
<div class="progress-bar-wrapper">
<div class="progress-wrapper" style="width: ${fileLoaded}%"></div>
</div>
</div>
</li>`;
uploadedContainer.classList.add("onprogress");
progressContainer.innerHTML = progressMarkup;
if (loaded == total) {
progressContainer.innerHTML = "";
let uploadedMarkup = `<li class="row">
<div class="content-wrapper upload">
<i class="fas fa-file-alt"></i>
<div class="details-wrapper">
<span class="name">${name} | <span>Uploaded</span></span>
<span class="file-size">${fileSize}</span>
</div>
</div>
</li>`;
uploadedContainer.classList.remove("onprogress");
uploadedContainer.insertAdjacentHTML("afterbegin", uploadedMarkup);
}
});
let data = new FormData(uploadForm);
xhrRequest.send(data);
}
これまでに行ったことは、file input 要素を使用して選択されたファイルを読み取り、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); ?>
この記事のここまでやり遂げたあなたは本当に素晴らしいです。
このチュートリアルでは、ファイル アップロード コンポーネントを構築し、それに進行状況バーを追加する方法を学習しました。これは、Web サイトを構築し、ユーザーに自分が参加していると感じてもらい、ファイルのアップロードがどのくらい遅いか速いかを把握してもらいたい場合に役立ちます。必要に応じていつでもこのプロジェクトを自由に再利用してください。
このチュートリアルを進めるときに行き詰まった場合は、GitHub にプロジェクトをアップロードして他の開発者の助けを求めることをお勧めします。または、私に DM を送っていただくこともできます。喜んでお手伝いします。
ここに、プロジェクトの GitHub リポジトリへのリンクがあります。
以上がVanilla JavaScript でファイルをアップロードし、読み込みアニメーションを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
