js上传文件到服务器|极客笔记

js上传文件到服务器

在网页开发中，经常会有用户需要上传文件的需求，比如头像、图片、文档等。而通过JavaScript可以实现文件上传到服务器的功能，本文将介绍如何使用JavaScript实现文件上传功能。具体包括文件选择、文件预览、文件上传等操作。

文件选择

首先，需要在HTML中创建一个文件选择的按钮，用户点击按钮可以选择需要上传的文件。代码如下：

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传文件</button>

在上面的代码中，通过<input type="file">标签创建了一个文件选择的按钮，id为fileInput；同时，还创建了一个点击按钮，点击按钮后调用uploadFile()函数进行文件上传操作。

文件预览

一般情况下，用户选择文件后，希望能够预览所选择的文件。可以通过如下代码实现文件预览的功能：

function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const filePreview = document.getElementById("filePreview");
    const previewImg = document.createElement("img");
    previewImg.src = e.target.result;
    filePreview.appendChild(previewImg);
  }

  reader.readAsDataURL(file);
}

document.getElementById("fileInput").addEventListener('change', handleFileSelect);

上述代码中，定义了handleFileSelect函数，当用户选择文件后，会触发该函数。通过FileReader对象读取用户选择的文件，并在页面上显示预览图像。

文件上传

文件预览完成后，接下来是将文件上传到服务器的步骤。可以使用FormData对象将文件上传到服务器。代码如下：

function uploadFile() {
  const fileInput = document.getElementById("fileInput");
  const file = fileInput.files[0];

  const formData = new FormData();
  formData.append('file', file);

  fetch('http://example.com/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('文件上传成功');
  })
  .catch(error => {
    console.error('文件上传失败');
  });
}

上述代码中，首先获取用户选择的文件，然后通过FormData对象创建一个表单数据对象，将文件作为参数添加到表单数据中。接着使用fetch函数将文件上传到服务器。在fetch函数中，需要指定上传文件的URL和请求方法（POST方法），同时将表单数据作为body参数传递。最后在then方法中处理上传成功和失败的逻辑。

完整代码示例

下面是一个完整的HTML文件，包含文件选择、文件预览、文件上传的功能：

<!DOCTYPE html>
<html>
<head>
  <title>文件上传示例</title>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="filePreview"></div>
  <button onclick="uploadFile()">上传文件</button>

  <script>
    function handleFileSelect(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = function(e) {
        const filePreview = document.getElementById("filePreview");
        const previewImg = document.createElement("img");
        previewImg.src = e.target.result;
        filePreview.appendChild(previewImg);
      }

      reader.readAsDataURL(file);
    }

    document.getElementById("fileInput").addEventListener('change', handleFileSelect);

    function uploadFile() {
      const fileInput = document.getElementById("fileInput");
      const file = fileInput.files[0];

      const formData = new FormData();
      formData.append('file', file);

      fetch('http://example.com/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log('文件上传成功');
      })
      .catch(error => {
        console.error('文件上传失败');
      });
    }
  </script>
</body>
</html>