How to implement file upload and download functions in javascript

In modern web development, file uploading and downloading are frequently encountered requirements. As one of the front-end development languages, JavaScript provides many powerful tool libraries and APIs to manage the file upload and download process.

This article will explore how to use JavaScript to implement file upload and download functions. First, it will introduce the File API based on HTML5, and then use jQuery and XMLHttpRequest to send AJAX requests to implement file upload and download.

1. HTML5’s File API

HTML5’s File API allows JavaScript to read and operate local files, including uploading and downloading. This API contains two objects, File and FileReader, to solve these problems.

1. File object

The File object represents a local file uploaded through a similar input field. This object has a series of properties to describe the file, such as file name, size, type wait. There are also methods that can be used to read the contents of this file.

For example:

<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

The FileReader object can be used to read files and store the file contents in memory for further processing. There are three events used to track the reading process: onloadstart, onprogress and onload. For example:

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 file upload

jQuery is a very powerful JavaScript library that provides a large number of powerful APIs, including AJAX requests, allowing us to use JavaScript to upload files. .

1. Basic file upload

The implementation of basic file upload is as follows:

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

In the above code, we first define an HTML form that contains a file Upload input box and an upload button. Then use jQuery's ajax methods to asynchronously send the form data to the backend for processing. When sending, we need to set processData and contentType to false to ensure that the FormData object can be sent to the server correctly without being styled.

2. Display upload progress

To display the progress of file upload, we need to make the following changes:

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

In the above code, we will xhr function Passed to the ajax method, this function returns an XMLHttpRequest object. We then use the addEventListener method to add a progress event listener, calculate the upload progress percentage and print it to the console.

3. XMLHttpRequest file download

XMLHttpRequest is a JavaScript object that can be used to create a client. It can obtain server data through AJAX requests and can also be used for file downloads.

The following is an example of file downloading through 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>

In the above code, we create a new XMLHttpRequest object and call the open method to open a GET request. We use the responseType attribute to tell the server that the expected response type is binary data, and then when the request completes, we use the onload event to handle the response and convert the response's binary data into a Blob object and create a link to download the file.

Summary

This article mainly introduces how to use JavaScript (including File API, jQuery and XMLHttpRequest) to implement the process of file upload and download. During the implementation process, you need to pay attention to compatibility issues under various circumstances, such as browser compatibility, as well as the processing of form submission data and the way to display progress, etc. By understanding these, we can better handle our file upload and download needs.

The above is the detailed content of How to implement file upload and download functions in javascript. For more information, please follow other related articles on the PHP Chinese website!