JavaScriptでファイルのアップロードとダウンロード機能を実装する方法

現代の Web 開発では、ファイルのアップロードとダウンロードが頻繁に必要になります。フロントエンド開発言語の 1 つである JavaScript は、ファイルのアップロードおよびダウンロードのプロセスを管理するための強力なツール ライブラリと API を多数提供します。

この記事では、JavaScript を使用してファイルのアップロードおよびダウンロード機能を実装する方法について説明します。まず、HTML5 に基づく File API を紹介し、次に jQuery および XMLHttpRequest を使用して AJAX リクエストを送信し、ファイルのアップロードおよびダウンロードを実装します。 。

1. HTML5 のファイル API

HTML5 のファイル API を使用すると、JavaScript でローカル ファイルを読み取り、アップロードやダウンロードなどの操作を行うことができます。この API には、これらの問題を解決するために、File と FileReader という 2 つのオブジェクトが含まれています。

1. File オブジェクト

File オブジェクトは、同様の入力フィールドを通じてアップロードされたローカル ファイルを表します。このオブジェクトには、ファイル名など、ファイルを説明するための一連のプロパティがあります。 、サイズ、タイプ待ちます。このファイルの内容を読み取るために使用できるメソッドもあります。

例:

<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 オブジェクト

FileReader オブジェクトを使用すると、ファイルを読み取り、その後の処理のためにファイルの内容をメモリに保存できます。読み取りプロセスを追跡するために使用されるイベントは、onloadstart、onprogress、onload の 3 つです。例:

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. jQuery ファイルのアップロード

jQuery は、AJAX リクエストを含む多数の強力な API を提供する非常に強力な JavaScript ライブラリであり、JavaScript を使用してファイルをアップロードできるようになります。 。

1. 基本的なファイル アップロード

基本的なファイル アップロードの実装は次のとおりです:

<!-- 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>

上記のコードでは、最初に HTML フォームを定義します。ファイルアップロード入力ボックスとアップロードボタンが含まれています。次に、jQuery の ajax メソッドを使用して、処理のためにフォーム データをバックエンドに非同期的に送信します。送信するときは、FormData オブジェクトをスタイルなしでサーバーに正しく送信できるように、processData と contentType を false に設定する必要があります。

2. アップロードの進行状況を表示

ファイルのアップロードの進行状況を表示するには、次の変更を加える必要があります:

$('#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)
    },
  })
})

上記のコードでは、 will xhr 関数 ajax メソッドに渡されると、この関数は XMLHttpRequest オブジェクトを返します。次に、addEventListener メソッドを使用して進行状況イベント リスナーを追加し、アップロードの進行状況のパーセンテージを計算して、それをコンソールに出力します。

3. XMLHttpRequest ファイルのダウンロード

XMLHttpRequest はクライアントの作成に使用できる JavaScript オブジェクトで、AJAX リクエストを通じてサーバー データを取得したり、ファイルのダウンロードにも使用できます。

次に、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>

上記のコードでは、新しい XMLHttpRequest オブジェクトを作成し、open メソッドを呼び出して GET リクエストを開きます。 responseType 属性を使用して、予期される応答タイプがバイナリ データであることをサーバーに伝え、リクエストが完了すると、onload イベントを使用して応答を処理し、応答のバイナリ データを Blob オブジェクトに変換して、ダウンロードするリンクを作成します。ファイル。

概要

この記事では主に、JavaScript (File API、jQuery、XMLHttpRequest など) を使用してファイルのアップロードとダウンロードの処理を実装する方法を紹介します。導入プロセスでは、ブラウザの互換性だけでなく、フォーム送信データの処理や進捗状況の表示方法など、さまざまな状況における互換性の問題に注意を払う必要があります。これらを理解することで、ファイルのアップロードとダウンロードのニーズをより適切に処理できるようになります。

以上がJavaScriptでファイルのアップロードとダウンロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。