原生JS和jQuery版实现文件上传功能

实现文件上传功能是网站开发中常见的需求之一。下面是原生JS和jQuery版实现文件上传功能的完整攻略。

原生JS版实现文件上传功能

原生JS版实现文件上传功能需要借助HTML5的FormData对象进行文件数据的封装和提交。

HTML代码

首先，在HTML代码中添加一个表单，表单内包含一个input[type=file]用于选择文件，以及一个按钮用于提交表单。

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <button type="button" id="uploadBtn">上传文件</button>
</form>

JS代码

其次，在JS代码中获取表单元素和按钮元素，对按钮添加点击事件监听器，在点击事件的响应函数中获取文件数据，使用FormData对象构造表单数据并提交表单。

var uploadForm = document.getElementById('uploadForm');
var uploadBtn = document.getElementById('uploadBtn');
uploadBtn.addEventListener('click', function() {
  var fileInput = document.querySelector('input[type=file]');
  var files = fileInput.files;
  var formData = new FormData(uploadForm);
  for (var i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.open('POST', '/upload');
  xhr.send(formData);
});

在以上代码中，需要注意以下几点：

使用FormData对象构造表单数据时，需要传入表单元素uploadForm作为构造函数的参数。
遍历files对象将每个文件都添加到FormData对象中，这样在后台处理时才能正确获取每个文件的数据。
XMLHttpRequest对象用于与后台进行数据交互，需要使用open()方法打开连接通道，并设置请求方法和请求地址，使用send()方法发送数据。
在readyState值为4时代表数据交互完成，status值为200时代表请求成功，text属性包含后台返回的数据。

示例说明

下面展示一个完整的原生JS版文件上传功能的示例，可与上述代码对照着看。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原生JS版文件上传</title>
</head>
<body>
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <button type="button" id="uploadBtn">上传文件</button>
  </form>
  <script>
    var uploadForm = document.getElementById('uploadForm');
    var uploadBtn = document.getElementById('uploadBtn');
    uploadBtn.addEventListener('click', function() {
      var fileInput = document.querySelector('input[type=file]');
      var files = fileInput.files;
      var formData = new FormData(uploadForm);
      for (var i = 0; i < files.length; i++) {
        formData.append('file', files[i]);
      }
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log(xhr.responseText);
          } else {
            console.error(xhr.statusText);
          }
        }
      };
      xhr.open('POST', '/upload');
      xhr.send(formData);
    });
  </script>
</body>
</html>

jQuery版实现文件上传功能

jQuery版实现文件上传功能和原生JS版的实现方式有所不同，jQuery的$.ajax()方法能直接上传文件数据。而且，jQuery也提供了一些便捷的方法方便我们操作表单。

HTML代码

和原生JS版一样，在HTML代码中添加一个表单，表单内包含一个input[type=file]用于选择文件，以及一个按钮用于提交表单。

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <button type="button" id="uploadBtn">上传文件</button>
</form>

JS代码

在JS代码中使用jQuery选择器获取表单元素和按钮元素，对按钮添加点击事件监听器，在点击事件的响应函数中使用$.ajax()方法提交表单数据。

var uploadForm = $('#uploadForm');
var uploadBtn = $('#uploadBtn');
uploadBtn.on('click', function() {
  var formData = new FormData(uploadForm[0]);
  $.ajax({
    type: 'POST',
    url: '/upload',
    data: formData,
    processData: false,
    contentType: false,
    success: function(res) {
      console.log(res);
    },
    error: function(xhr, status, err) {
      console.error(status, err.toString());
    }
  });
});

在以上代码中，需要注意以下几点：

使用FormData对象构造表单数据时，需要传入表单元素uploadForm[0]作为构造函数的参数。
在$.ajax()方法中使用type属性设置请求方法，使用url属性设置请求地址，使用data属性设置请求数据，processData属性和contentType属性都设置为false，以便正确处理FormData对象的数据。
success属性和error属性分别代表请求成功和请求失败的回调函数。

示例说明

下面展示一个完整的jQuery版文件上传功能的示例，可与上述代码对照着看。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery版文件上传</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <button type="button" id="uploadBtn">上传文件</button>
  </form>
  <script>
    var uploadForm = $('#uploadForm');
    var uploadBtn = $('#uploadBtn');
    uploadBtn.on('click', function() {
      var formData = new FormData(uploadForm[0]);
      $.ajax({
        type: 'POST',
        url: '/upload',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
          console.log(res);
        },
        error: function(xhr, status, err) {
          console.error(status, err.toString());
        }
      });
    });
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS和jQuery版实现文件上传功能 - Python技术站

原生JS和jQuery版实现文件上传功能

原生JS版实现文件上传功能

HTML代码

JS代码

示例说明

jQuery版实现文件上传功能

HTML代码

JS代码

示例说明

相关文章