Vanilla JavaScript でファイルをアップロードし、読み込みアニメーションを追加する方法-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

Vanilla JavaScript でファイルをアップロードし、読み込みアニメーションを追加する方法

PHPz

Aug 05, 2024 pm 07:00 PM

How to Upload Files With Vanilla JavaScript and Add a Loading Animation

ファイルのアップロードは、どの 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 リポジトリへのリンクがあります。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1670

CakePHP チュートリアル

1428

Laravel チュートリアル

1329

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

PHPでの安全なパスワードハッシュ（例：Password_hash、password_verify）を説明します。 MD5またはSHA1を使用してみませんか？ Apr 17, 2025 am 12:06 AM

PHPでは、Password_hashとpassword_verify関数を使用して安全なパスワードハッシュを実装する必要があり、MD5またはSHA1を使用しないでください。 1）password_hashセキュリティを強化するために、塩値を含むハッシュを生成します。 2）password_verifyハッシュ値を比較して、パスワードを確認し、セキュリティを確保します。 3）MD5とSHA1は脆弱であり、塩の値が不足しており、最新のパスワードセキュリティには適していません。

PHPとPython：2つの一般的なプログラミング言語を比較します Apr 14, 2025 am 12:13 AM

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

アクション中のPHP：実際の例とアプリケーション Apr 14, 2025 am 12:19 AM

PHPは、電子商取引、コンテンツ管理システム、API開発で広く使用されています。 1）eコマース：ショッピングカート機能と支払い処理に使用。 2）コンテンツ管理システム：動的コンテンツの生成とユーザー管理に使用されます。 3）API開発：RESTFUL API開発とAPIセキュリティに使用されます。パフォーマンスの最適化とベストプラクティスを通じて、PHPアプリケーションの効率と保守性が向上します。

スカラータイプ、リターンタイプ、ユニオンタイプ、ヌル可能なタイプなど、PHPタイプのヒントはどのように機能しますか？ Apr 17, 2025 am 12:25 AM

PHPタイプは、コードの品質と読みやすさを向上させるためのプロンプトがあります。 1）スカラータイプのヒント：php7.0であるため、基本データ型は、int、floatなどの関数パラメーターで指定できます。 3）ユニオンタイプのプロンプト：PHP8.0であるため、関数パラメーターまたは戻り値で複数のタイプを指定することができます。 4）Nullable Typeプロンプト：null値を含めることができ、null値を返す可能性のある機能を処理できます。

PHPの永続的な関連性：それはまだ生きていますか？ Apr 14, 2025 am 12:12 AM

PHPは依然として動的であり、現代のプログラミングの分野で重要な位置を占めています。 1）PHPのシンプルさと強力なコミュニティサポートにより、Web開発で広く使用されています。 2）その柔軟性と安定性により、Webフォーム、データベース操作、ファイル処理の処理において顕著になります。 3）PHPは、初心者や経験豊富な開発者に適した、常に進化し、最適化しています。

PHPおよびPython：さまざまなパラダイムが説明されています Apr 18, 2025 am 12:26 AM

PHPは主に手順プログラミングですが、オブジェクト指向プログラミング（OOP）もサポートしています。 Pythonは、OOP、機能、手続き上のプログラミングなど、さまざまなパラダイムをサポートしています。 PHPはWeb開発に適しており、Pythonはデータ分析や機械学習などのさまざまなアプリケーションに適しています。

PHPでのSQL注入をどのように防止しますか？（準備された声明、PDO） Apr 15, 2025 am 12:15 AM

PHPで前処理ステートメントとPDOを使用すると、SQL注入攻撃を効果的に防ぐことができます。 1）PDOを使用してデータベースに接続し、エラーモードを設定します。 2）準備方法を使用して前処理ステートメントを作成し、プレースホルダーを使用してデータを渡し、メソッドを実行します。 3）結果のクエリを処理し、コードのセキュリティとパフォーマンスを確保します。