Javascript menghapus file dari banyak input

Question

Berurusan dengan file adalah salah satu operasi paling umum untuk aplikasi di web. Secara tradisional, pengguna perlu mengunggah file, membuat beberapa perubahan, lalu mengunduhnya lagi, menghasilkan salinan di folder Unduhan. Dengan File System Access API, pengguna kini dapat membuka file secara langsung, melakukan modifikasi, dan menyimpan kembali perubahan ke file aslinya

Table of Contents Show

Cara modern
Menggunakan metode showOpenFilePicker() File System Access API
Cara klasik
Menggunakan elemen <input type="file">
Peningkatan progresif
Bagaimana cara menghapus satu file tertentu yang dipilih dari kontrol file input?
Bagaimana cara menghapus nilai file tipe input dalam JavaScript?
Bagaimana cara menghapus file dari FileList JavaScript?
Bagaimana cara menghapus file yang dipilih dari file tipe input menggunakan jQuery?

Cara modern

Menggunakan metode showOpenFilePicker() File System Access API

Untuk membuka file, panggil showOpenFilePicker()_, yang mengembalikan janji dengan array dari file atau file yang dipilih. Jika Anda memerlukan banyak file, Anda dapat meneruskan { multiple: true, } ke metode

Dukungan browser. chrome 86, Didukung 86 firefox, Tidak didukung × edge 86, Supported 86 safari, Not supported ×

Cara klasik

Menggunakan elemen <input type="file">

Elemen <input type="file"> pada halaman memungkinkan pengguna untuk mengkliknya dan membuka satu atau beberapa file. Triknya sekarang terdiri dari memasukkan elemen secara tidak terlihat ke halaman dengan JavaScript dan mengkliknya secara terprogram

Dukungan browser. chrome true, Didukung ✅ firefox 1, Didukung 1 edge 12, Supported 12 safari 1, Supported 1

Peningkatan progresif

Metode di bawah ini menggunakan File System Access API jika didukung dan kembali ke pendekatan klasik. Dalam kedua kasus, fungsi mengembalikan larik file, tetapi jika API Akses Sistem File didukung, setiap objek file juga memiliki FileSystemFileHandle yang disimpan di properti

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
    />
    <title>How to open one or multiple files</title>
  </head>
  <body>
    <h1>How to open one or multiple files</h1>
    <button type="button">Open file</button>
    <button class="multiple" type="button">Open files</button>
    <pre></pre>
  </body>
</html>

0, sehingga Anda dapat secara opsional membuat serial pegangan ke disk

Ketika ada situasi di mana kita perlu menghapus item dari DOM melalui JavaScript, kita tidak dapat melakukannya langsung dari objek FileList. Kita perlu menetapkan yang berikut ini ke sebuah array

$('input:file#upload')[1].files

_

Setelah itu hapus item dari array ini menggunakan sambatan atau metode pilihan kami dan gunakan array itu

Cara lain adalah mengunggah file dengan bantuan pengunggah file HTML dan kemudian menghapus objek terkait dengan menggunakan JavaScript

Menggunakan File API, konten web dapat meminta pengguna untuk memilih file lokal dan kemudian membaca konten file tersebut. Pemilihan ini dapat dilakukan dengan menggunakan elemen HTML

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

4 atau dengan drag and drop

Pertimbangkan HTML ini

<input type="file" id="input" multiple />

File API memungkinkan untuk mengakses

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

5 berisi

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

6 objek yang mewakili file yang dipilih oleh pengguna

Atribut

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

_7 pada elemen

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

8 memungkinkan pengguna untuk memilih beberapa file

Mengakses file yang dipilih pertama menggunakan pemilih DOM klasik

const selectedFile = document.getElementById('input').files[0];

_

Dimungkinkan juga (tetapi tidak wajib) untuk mengakses

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

5 melalui acara

const numFiles = fileList.length;

0. Anda perlu menggunakan

const numFiles = fileList.length;

_1 untuk menambahkan pendengar acara

const numFiles = fileList.length;

0, seperti ini

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

Objek

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

_5 yang disediakan oleh DOM mencantumkan semua file yang dipilih oleh pengguna, masing-masing ditetapkan sebagai objek

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

6. Anda dapat menentukan berapa banyak file yang dipilih pengguna dengan memeriksa nilai atribut

const numFiles = fileList.length;

5 daftar file

const numFiles = fileList.length;

Objek

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

_6 individu dapat diambil dengan mengakses daftar sebagai larik

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

Loop ini mengulangi semua file dalam daftar file

Ada tiga atribut yang disediakan oleh objek

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

_6 yang berisi informasi berguna tentang file tersebut

const numFiles = fileList.length;

_8

Nama file sebagai string hanya-baca. Ini hanyalah nama file, dan tidak menyertakan informasi jalur apa pun

const numFiles = fileList.length;

_9

Ukuran file dalam byte sebagai integer 64-bit hanya-baca

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

_0

Jenis file MIME sebagai string hanya-baca atau

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

1 jika jenisnya tidak dapat ditentukan

Contoh berikut menunjukkan kemungkinan penggunaan properti

const numFiles = fileList.length;

_9

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

Anda dapat menyembunyikan elemen

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

3 file yang diakui jelek dan menyajikan antarmuka Anda sendiri untuk membuka pemilih file dan menampilkan file atau file mana yang telah dipilih pengguna. Anda dapat melakukan ini dengan menata elemen input dengan

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

4 dan memanggil metode

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

5 pada elemen

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

3

Pertimbangkan HTML ini

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

Kode yang menangani event

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

_7 dapat terlihat seperti ini

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

Anda dapat menata

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

_8 sesuka Anda

Untuk memungkinkan membuka pemilih file tanpa menggunakan JavaScript (metode click()), elemen

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

9 dapat digunakan. Perhatikan bahwa dalam hal ini elemen input tidak boleh disembunyikan menggunakan

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

0 (atau

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

1), jika tidak, label tidak dapat diakses dengan keyboard. Gunakan teknik visual-tersembunyi sebagai gantinya

Pertimbangkan HTML ini

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

dan CSS ini

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:is(:focus, :focus-within) + label {
  outline: thin dotted;
}

Tidak perlu menambahkan kode JavaScript untuk memanggil

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

2. Juga dalam hal ini Anda dapat menata elemen label sesuai keinginan. Anda perlu memberikan isyarat visual untuk status fokus bidang input tersembunyi pada labelnya, baik berupa garis luar seperti yang ditunjukkan di atas, atau warna latar atau bayangan kotak. (Pada saat penulisan, Firefox tidak menunjukkan isyarat visual ini untuk

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

3 elemen. )

Anda juga dapat membiarkan pengguna menyeret dan melepaskan file ke dalam aplikasi web Anda

Langkah pertama adalah membuat zona penurunan. Tepatnya bagian mana dari konten Anda yang akan menerima drop dapat bervariasi tergantung pada desain aplikasi Anda, tetapi membuat elemen menerima drop event itu mudah

const selectedFile = document.getElementById('input').files[0];

_0

Dalam contoh ini, kami mengubah elemen dengan ID

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

4 menjadi zona lepas. Hal ini dilakukan dengan menambahkan pendengar untuk

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

5,

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

6, dan

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

7 acara

Kami sebenarnya tidak perlu melakukan apa pun dengan peristiwa

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

5 dan

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent = uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false
      );
    </script>
  </body>
</html>

6 dalam kasus kami, jadi kedua fungsi ini sederhana. Mereka hanya menghentikan penyebaran acara dan mencegah terjadinya tindakan default

const selectedFile = document.getElementById('input').files[0];

_1

Keajaiban nyata terjadi pada fungsi

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

0

const selectedFile = document.getElementById('input').files[0];

_2

Di sini, kami mengambil bidang

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

_1 dari acara, menarik daftar file darinya, lalu meneruskannya ke

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

2. Mulai saat ini, penanganan file sama apakah pengguna menggunakan elemen

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

8 atau drag and drop

Katakanlah Anda sedang mengembangkan situs web berbagi foto hebat berikutnya dan ingin menggunakan HTML untuk menampilkan pratinjau thumbnail gambar sebelum pengguna benar-benar mengunggahnya. Anda dapat menetapkan elemen input atau zona jatuhkan seperti yang telah dibahas sebelumnya dan meminta mereka memanggil fungsi seperti fungsi

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

2 di bawah

const selectedFile = document.getElementById('input').files[0];

_3

Di sini loop kami menangani file yang dipilih pengguna melihat atribut

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

0 setiap file untuk melihat apakah tipe MIME-nya dimulai dengan string "

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

6"). Untuk setiap file yang merupakan gambar, kami membuat elemen

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

7 baru. CSS dapat digunakan untuk menetapkan batas atau bayangan yang cantik dan untuk menentukan ukuran gambar, sehingga tidak perlu dilakukan di sini

Setiap gambar memiliki kelas CSS

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

_8 yang ditambahkan ke dalamnya, membuatnya mudah ditemukan di pohon DOM. Kami juga menambahkan atribut

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

_9 ke setiap gambar yang menentukan

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

6 untuk gambar tersebut; . Kami menggunakan

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

_1 untuk menambahkan thumbnail baru ke area pratinjau dokumen kami

Selanjutnya, kami menetapkan

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

_2 untuk menangani pemuatan gambar secara asinkron dan melampirkannya ke elemen

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

7. Setelah membuat objek

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

2 baru, kami menyiapkan fungsi

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

5 dan kemudian memanggil

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

6 untuk memulai operasi baca di latar belakang. Ketika seluruh konten file gambar dimuat, mereka diubah menjadi URL

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

7 yang diteruskan ke callback

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

5. Implementasi kami dari rutinitas ini menyetel atribut

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

_7 elemen

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

0 ke gambar yang dimuat yang menghasilkan gambar yang muncul di thumbnail di layar pengguna

Metode DOM

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

1 dan

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

2 memungkinkan Anda membuat string URL sederhana yang dapat digunakan untuk mereferensikan data apa pun yang dapat dirujuk menggunakan objek DOM

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

6, termasuk file lokal di komputer pengguna

Saat Anda memiliki objek

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

_6 yang ingin Anda rujuk dengan URL dari HTML, Anda dapat membuat URL objek untuknya seperti ini

const selectedFile = document.getElementById('input').files[0];

_4

URL objek adalah string yang mengidentifikasi objek

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

6. Setiap kali Anda memanggil

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

1, URL objek unik dibuat meskipun Anda sudah membuat URL objek untuk file itu. Masing-masing harus dilepaskan. Meskipun dirilis secara otomatis saat dokumen diturunkan, jika laman Anda menggunakannya secara dinamis, Anda harus melepaskannya secara eksplisit dengan memanggil

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

2

const selectedFile = document.getElementById('input').files[0];

_5

Contoh ini menggunakan URL objek untuk menampilkan thumbnail gambar. Selain itu, ini menampilkan informasi file lain termasuk nama dan ukurannya

HTML yang menyajikan antarmuka terlihat seperti ini

const selectedFile = document.getElementById('input').files[0];

_6

Ini menetapkan elemen

for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  // …
}

_3 file kami serta tautan yang memanggil pemilih file (karena kami menyembunyikan input file untuk mencegah antarmuka pengguna yang kurang menarik ditampilkan). Ini dijelaskan di bagian , seperti metode yang memanggil pemilih file

Metode

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

_2 berikut

const selectedFile = document.getElementById('input').files[0];

_7

Ini dimulai dengan mengambil URL dari

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:is(:focus, :focus-within) + label {
  outline: thin dotted;
}

0 dengan ID

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:is(:focus, :focus-within) + label {
  outline: thin dotted;
}

1. Ini adalah blok tempat kami akan memasukkan daftar file kami, termasuk thumbnail

Jika objek

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

_5 diteruskan ke

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

2 adalah

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:is(:focus, :focus-within) + label {
  outline: thin dotted;
}

4, kita menyetel HTML bagian dalam dari blok untuk menampilkan "Tidak ada file yang dipilih. ". Jika tidak, kami mulai membuat daftar file kami, sebagai berikut

Elemen unordered list (

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:is(:focus, :focus-within) + label {
  outline: thin dotted;
}

_5) baru dibuat

Elemen daftar baru dimasukkan ke dalam blok

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:is(:focus, :focus-within) + label {
  outline: thin dotted;
}

0 dengan memanggil metode

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

1

Untuk setiap

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

_6 di

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

5 diwakili oleh

const selectedFile = document.getElementById('input').files[0];

00

Buat elemen daftar item baru (

const selectedFile = document.getElementById('input').files[0];

_01) dan masukkan ke dalam daftar

Buat elemen gambar baru (

const selectedFile = document.getElementById('input').files[0];

_02).

Setel sumber gambar ke URL objek baru yang mewakili file, menggunakan

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

1 untuk membuat URL blob

Atur tinggi gambar menjadi 60 piksel

Siapkan penangan peristiwa muat gambar untuk melepaskan URL objek karena tidak lagi diperlukan setelah gambar dimuat. Ini dilakukan dengan memanggil metode

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  class="visually-hidden" />
<label for="fileElem">Select some files</label>

2 dan meneruskan string URL objek seperti yang ditentukan oleh

const selectedFile = document.getElementById('input').files[0];

05

Tambahkan item daftar baru ke daftar

Ini adalah demo langsung dari kode di atas

Hal lain yang mungkin ingin Anda lakukan adalah membiarkan pengguna mengunggah file atau file yang dipilih (seperti gambar yang dipilih menggunakan contoh sebelumnya) ke server. Ini dapat dilakukan secara asinkron dengan sangat mudah

Melanjutkan dengan kode yang membuat thumbnail pada contoh sebelumnya, ingatlah bahwa setiap gambar thumbnail ada di kelas CSS

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

8 dengan

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

6 terkait yang dilampirkan dalam atribut

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

9. Ini memungkinkan kami memilih semua gambar yang telah dipilih pengguna untuk diunggah menggunakan

const selectedFile = document.getElementById('input').files[0];

09, seperti ini

const selectedFile = document.getElementById('input').files[0];

_8

Baris 2 mengambil

const selectedFile = document.getElementById('input').files[0];

_10, disebut

const selectedFile = document.getElementById('input').files[0];

11, dari semua elemen dalam dokumen dengan kelas CSS

<input
  type="file"
  id="fileElem"
  multiple
  accept="image/*"
  style="display:none" />
<button id="fileSelect" type="button">Select some files</button>

8. Dalam kasus kami, ini akan menjadi semua thumbnail gambar. Setelah kami memiliki daftar itu, mudah untuk melewatinya dan membuat instance

const selectedFile = document.getElementById('input').files[0];

13 baru untuk masing-masing. Masing-masing menangani pengunggahan file yang sesuai

Fungsi

const selectedFile = document.getElementById('input').files[0];

13 menerima dua masukan. elemen gambar dan file untuk membaca data gambar

const selectedFile = document.getElementById('input').files[0];

_9

Fungsi

const selectedFile = document.getElementById('input').files[0];

15 yang ditunjukkan di atas membuat throbber, yang digunakan untuk menampilkan informasi progres, lalu membuat

const selectedFile = document.getElementById('input').files[0];

16 untuk menangani pengunggahan data

Sebelum benar-benar mentransfer data, beberapa langkah persiapan dilakukan

Pendengar
```
const selectedFile = document.getElementById('input').files[0];
```
16 upload
```
const selectedFile = document.getElementById('input').files[0];
```
18 diatur untuk memperbarui throbber dengan informasi persentase baru sehingga saat upload berlangsung, throbber akan diperbarui berdasarkan informasi terbaru
Pengendali kejadian
```
const selectedFile = document.getElementById('input').files[0];
```
16 unggahan
```
const selectedFile = document.getElementById('input').files[0];
```
20 disetel untuk memperbarui informasi kemajuan denyut menjadi 100% untuk memastikan indikator kemajuan benar-benar mencapai 100% (jika terjadi kebiasaan perincian selama proses). Kemudian menghilangkan denyut karena tidak lagi diperlukan. Ini menyebabkan throbber menghilang setelah unggahan selesai

Permintaan untuk mengunggah file gambar dibuka dengan memanggil metode

const selectedFile = document.getElementById('input').files[0];

16

const selectedFile = document.getElementById('input').files[0];

22 untuk mulai membuat permintaan POST

Jenis MIME untuk upload diatur dengan memanggil fungsi

const selectedFile = document.getElementById('input').files[0];

16

const selectedFile = document.getElementById('input').files[0];

24. Dalam hal ini, kami menggunakan tipe MIME umum;

Objek

const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", (e) => {
  if (fileElem) {
    fileElem.click();
  }
}, false);

_2 digunakan untuk mengonversi file menjadi string biner

Terakhir, saat konten dimuat, fungsi

const selectedFile = document.getElementById('input').files[0];

_16

const selectedFile = document.getElementById('input').files[0];

27 dipanggil untuk mengunggah konten file

Contoh ini, yang menggunakan PHP di sisi server dan JavaScript di sisi klien, menunjukkan pengunggahan file secara asinkron

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

0

URL objek dapat digunakan untuk hal lain selain gambar. Mereka dapat digunakan untuk menampilkan file PDF yang disematkan atau sumber daya lainnya yang dapat ditampilkan oleh browser

Bagaimana cara menghapus satu file tertentu yang dipilih dari kontrol file input?

5 Jawaban .

Tambahkan pendengar acara perubahan input file normal

Ulangi setiap file dari acara perubahan, filter untuk validasi yang diinginkan

Dorong file yang valid ke dalam larik terpisah

Gunakan FileReader API untuk membaca file secara lokal

Kirim file yang valid dan diproses ke server

Bagaimana cara menghapus nilai file tipe input dalam JavaScript?

maka lakukan saja. $("#fileControl"). val(''); untuk mereset kontrol file.

Bagaimana cara menghapus file dari FileList JavaScript?

Satu cara untuk menghapus file dari JavaScript FileList adalah menggunakan operator spread untuk mengubah FileList menjadi array. Kemudian kita dapat memanggil splice untuk menghapus file yang kita inginkan .