教你3分钟利用原生js实现有进度监听的文件上传预览组件

下面我将详细讲解如何使用原生JS实现有进度监听的文件上传预览组件。

什么是文件上传预览组件？

文件上传预览组件是一种可以帮助用户在上传文件前预览文件，并能够实时监听上传进度的组件。在实现该组件时，我们需要用到HTML5的新特性——File API。File API提供了一组API来操作文件，包括读取上传的文件，预览文件，监听文件上传进度等功能。

如何使用原生JS实现文件上传预览组件？

1. html部分

首先，我们需要在HTML中创建一个用于选择和上传文件的按钮，并用标签来实现。此外，我们还需要创建一个用于展示上传文件的区域。

<button id="uploadBtn">选择文件</button>
<div id="preview"></div>

2. JS部分

接下来，在JS中，我们需要监听上传按钮的点击事件，并在该事件中通过File API来读取上传的文件。

const uploadBtn = document.getElementById('uploadBtn')
const preview = document.getElementById('preview')

uploadBtn.addEventListener('click', function() {
  const file = document.createElement('input')
  file.type = 'file'
  file.click()
  file.addEventListener('change', function() {
    const reader = new FileReader()
    reader.readAsDataURL(file.files[0])
    reader.onload = function() {
      const uploadedImage = document.createElement('img')
      uploadedImage.src = reader.result
      preview.appendChild(uploadedImage)
    }
  })
})

在上述代码中，我们首先获取了HTML中的上传按钮和展示区域。然后，监听了上传按钮的点击事件。当用户点击上传按钮时，向页面中添加一个元素，并立即点击该元素，以触发系统文件选择对话框。当用户选择文件后，我们通过FileReader来读取上传的文件，并用标签来展示该文件。

3. 实时监听文件上传进度

上述代码中，我们实现了一个简单的文件上传预览组件。但是，该组件还没有实现实时监听文件上传进度的功能。为了实现该功能，我们需要通过XMLHttpRequest对象来实现文件上传，并通过该对象的progress事件来监听文件上传进度。

const uploadBtn = document.getElementById('uploadBtn')
const preview = document.getElementById('preview')

uploadBtn.addEventListener('click', function() {
  const file = document.createElement('input')
  file.type = 'file'
  file.click()
  file.addEventListener('change', function() {
    const formData = new FormData()
    formData.append('file', file.files[0])

    const xhr = new XMLHttpRequest()
    xhr.upload.addEventListener('progress', function(e) {
      if (e.lengthComputable) {
        const percentComplete = e.loaded / e.total * 100
        console.log(percentComplete)
      }
    }, false)

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const uploadedImage = document.createElement('img')
        uploadedImage.src = xhr.responseText
        preview.appendChild(uploadedImage)
      }
    }

    xhr.open('POST', 'upload.php', true)
    xhr.send(formData)
  })
})

在上述代码中，我们新增了一个FormData对象，并将上传的文件添加到该对象中。然后，我们通过XMLHttpRequest来实现文件上传，并监听该对象的progress事件，在该事件中计算并打印上传文件的进度。最后，当文件上传成功后，我们用标签来展示上传成功后返回的图片。

示例说明

示例1：如何实现通过原生JS实现文件上传预览组件？

在示例1中，我们通过上述的代码来实现通过原生JS实现文件上传预览组件的功能，并将上传的文件展示在页面中。

示例2：如何实现实时监听文件上传进度？

在示例2中，我们修改了上述代码，通过XMLHttpRequest对象来实现实时监听文件上传进度的功能。我们通过该对象的progress事件来实现实时监听文件上传进度，并在控制台中打印上传进度。