Bagaimana untuk melaksanakan fungsi muat naik dan muat turun fail dalam javascript

Dalam pembangunan web moden, muat naik dan muat turun fail adalah keperluan yang kerap dihadapi. Sebagai salah satu bahasa pembangunan bahagian hadapan, JavaScript menyediakan banyak perpustakaan alat yang berkuasa dan API untuk mengurus proses muat naik dan muat turun fail.

Artikel ini akan meneroka cara menggunakan JavaScript untuk melaksanakan fungsi muat naik dan muat turun fail Pertama, ia akan memperkenalkan API Fail berdasarkan HTML5, dan kemudian menggunakan jQuery dan XMLHttpRequest untuk menghantar permintaan AJAX untuk melaksanakan muat naik dan muat turun fail. .

1. API Fail HTML5

API Fail HTML5 membenarkan JavaScript membaca dan mengendalikan fail setempat, termasuk memuat naik dan memuat turun. API ini mengandungi dua objek, File dan FileReader, untuk menyelesaikan masalah ini.

1. Objek fail

Objek fail mewakili fail setempat yang dimuat naik melalui medan input yang serupa Objek ini mempunyai siri sifat untuk menerangkan fail, seperti nama fail, saiz, taip tunggu. Terdapat juga kaedah yang boleh digunakan untuk membaca kandungan fail ini.

Contohnya:

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

<script>
const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
console.log(file.name)         // 文件名
console.log(file.size)         // 文件大小
console.log(file.type)         // MIME 类型
</script>

2. FileReader Object

FileReader object boleh digunakan untuk membaca fail dan menyimpan kandungan fail dalam ingatan untuk selanjutnya berurusan pemprosesan dengan. Terdapat tiga peristiwa yang digunakan untuk menjejaki proses pembacaan: onloadstart, onprogress dan onload. Contohnya:

const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
const reader = new FileReader()

reader.onload = function() {
    console.log(reader.result)  // 读取完成后的文件内容
}

reader.readAsText(file)         // 按文本格式读取文件

2. Muat naik fail jQuery

jQuery ialah perpustakaan JavaScript yang sangat berkuasa yang menyediakan sejumlah besar API berkuasa, termasuk permintaan AJAX, membolehkan kami menggunakan JavaScript untuk melaksanakan Muat naik fail.

1. Muat naik fail asas

Pelaksanaan muat naik fail asas adalah seperti berikut:

<!-- HTML 代码 -->
<form enctype="multipart/form-data" id="form">
  <input type="file" name="file" />
  <button type="button" id="upload">上传</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // JavaScript 代码
  $('#upload').click(() => {
    const formData = new FormData($('#form')[0])
    $.ajax({
      url: '/upload',
      type: 'POST',
      cache: false,
      processData: false,
      contentType: false,
      data: formData,
      success: function (res) {
        console.log(res)
      },
      error: function (err) {
        console.log(err)
      },
    })
  })
</script>

Dalam kod di atas, kami mentakrifkan HTML terlebih dahulu borang, termasuk Kotak input muat naik fail dan butang muat naik. Kemudian gunakan kaedah ajax jQuery untuk menghantar data borang secara tak segerak ke bahagian belakang untuk diproses. Semasa menghantar, kami perlu menetapkan processData dan contentType kepada false untuk memastikan objek FormData boleh dihantar ke pelayan dengan betul tanpa digayakan.

2. Tunjukkan kemajuan muat naik

Untuk menunjukkan kemajuan muat naik fail, kita perlu membuat perubahan berikut:

$('#upload').click(() => {
  const formData = new FormData($('#form')[0])
  $.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    processData: false,
    contentType: false,
    data: formData,
    xhr: function () {
      const xhr = new window.XMLHttpRequest()
      xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
          const percent = Math.round((e.loaded / e.total) * 100)
          console.log(percent + '%')
        }
      }, false)
      return xhr
    },
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    },
  })
})

Dalam kod di atas , kita akan Fungsi xhr dihantar kepada kaedah ajax, dan fungsi ini mengembalikan objek XMLHttpRequest. Kami kemudian menggunakan kaedah addEventListener untuk menambah pendengar acara kemajuan, mengira peratusan kemajuan muat naik dan mencetaknya ke konsol.

3. Muat turun fail XMLHttpRequest

XMLHttpRequest ialah objek JavaScript yang boleh digunakan untuk mencipta klien Ia boleh mendapatkan data pelayan melalui permintaan AJAX dan juga boleh digunakan untuk muat turun fail.

Berikut ialah contoh muat turun fail melalui XMLHttpRequest:

<a href="#" id="download">下载文件</a>
<script>
  $('#download').click(() => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/download', true)
    xhr.responseType = 'blob'
    xhr.onload = function (e) {
      if (this.status === 200) {
        const blob = new Blob([this.response], { type: 'application/octet-stream' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'file.zip'
        link.click()
      }
    }
    xhr.send()
  })
</script>

Dalam kod di atas, kami mencipta objek XMLHttpRequest baharu dan memanggil kaedah terbuka untuk membuka permintaan GET. Kami menggunakan atribut responseType untuk memberitahu pelayan bahawa jenis respons yang dijangkakan ialah data binari, dan kemudian apabila permintaan selesai, kami menggunakan acara onload untuk mengendalikan respons dan menukar data binari respons kepada objek Blob dan mencipta pautan untuk memuat turun fail tersebut.

Ringkasan

Artikel ini terutamanya memperkenalkan cara menggunakan JavaScript (termasuk API Fail, jQuery dan XMLHttpRequest) untuk melaksanakan proses muat naik dan muat turun fail. Semasa proses pelaksanaan, anda perlu memberi perhatian kepada isu keserasian dalam pelbagai keadaan, seperti keserasian penyemak imbas, serta pemprosesan data penyerahan borang dan cara untuk memaparkan kemajuan, dsb. Dengan memahami perkara ini, kami boleh mengendalikan keperluan muat naik dan muat turun fail kami dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi muat naik dan muat turun fail dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!