Jquery实现异步上传文件

下面是详细的“Jquery实现异步上传文件”的攻略过程。

1. 异步上传需要用到的工具

要实现异步上传文件，我们需要使用到以下工具和技术：

Jquery库：异步上传文件需要借助AJAX的技术，Jquery是常用的AJAX库之一。
FormData对象：它可以直接用于构建表单数据，特别是在上传二进制文件的时候。
XMLHttpRequest对象：XHR对象可以与服务器进行数据交换，是实现异步上传最核心的对象之一。

2. 实现异步上传的具体步骤

通过以上介绍我们已经清晰了解到异步上传的必要工具，下面按照步骤详细讲解实现异步上传文件的具体过程。

2.1. 选择文件上传表单

我们需要先准备一个可供选择文件的表单，一般使用<input type="file">标签：

<form id="myForm" action="upload.php" method="POST" enctype="multipart/form-data">
  <input type="file" name="myfile" id="myfile">
  <input type="submit" value="上传">
</form>

2.2. 监听表单提交事件

使用Jquery的submit()函数监听表单提交事件，接下来的步骤都是在表单提交事件里进行的：

$(document).ready(function(){
  $('#myForm').submit(function(e){
    e.preventDefault();
    // 此处实现异步上传的相关代码
  });
});

其中 e.preventDefault(); 用来阻止表单的默认提交操作，从而实现异步上传。

2.3. 构建FormData对象

在表单提交事件的回调函数里，我们需要构建FormData对象，并将文件对象添加到其中：

var formData = new FormData();
formData.append('file', $('#myfile')[0].files[0]);

上面的代码将文件对象添加到了 formData 对象中，并通过 $('#myfile')[0].files[0] 取得了文件对象。

2.4. 发送XHR请求

接下来，我们使用XHR对象来上传文件数据：

$.ajax({
  url: 'upload.php',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(res){
    alert('上传成功！');
  },
  error: function(){
    alert('上传失败！');
  }
});

上面的代码发送了异步请求，在数据传输时，我们要配置 processData: false 和 contentType: false 来帮助我们处理文件类型的数据。其中 success 事件是上传成功的回调函数， error 事件是上传失败的回调函数。

3. 完整示例代码

下面是一个完整的异步上传文件的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Jquery异步上传文件</title>
</head>
<body>
  <form id="myForm" action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="myfile" id="myfile">
    <input type="submit" value="上传">
  </form>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myForm').submit(function(e){
        e.preventDefault();

        var formData = new FormData();
        formData.append('file', $('#myfile')[0].files[0]);

        $.ajax({
          url: 'upload.php',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(res){
            alert('上传成功！');
          },
          error: function(){
            alert('上传失败！');
          }
        });
      });
    });
  </script>
</body>
</html>

upload.php 文件内容：

<?php
  if ($_FILES["file"]["error"] > 0) {
    echo "Error: " . $_FILES["file"]["error"] . "<br>";
  } else {
    echo "上传成功： " . $_FILES["file"]["name"];
  }
?>

4. 示例展示

为了更好的展示这份Jquery异步上传文件的教程，此处再用两个实例进行展示：

实例1：

新建一个html文件并粘贴以上代码
开启本地服务（可用XAMPP、WAMP等）并打开浏览器访问该文件
在表单中选择文件并上传，会弹出上传成功的提示框

实例2：

在HTML5的拖拽API的基础上，我们还可以将拖拽的文件直接上传到服务器，具体过程如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Jquery异步上传文件</title>
  <style type="text/css">
    .dropbox {
      border: 2px dashed #ccc;
      border-radius: 4px;
      padding: 10px;
      text-align: center;
      font-size: 16px;
      color: #808080;
      margin-bottom: 20px;
    }
    .dropbox.hover {
      border-color: #0075ff;
      color: #0075ff;
    }
  </style>
</head>
<body>
  <div class="dropbox">拖拽或点击上传文件</div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      var dropbox = $('.dropbox');

      // 取消浏览器默认拖拽事件
      $(document).on('dragover', function(e){
        e.preventDefault();
      });
      $(document).on('drop', function(e){
        e.preventDefault();
      });

      // 拖拽文件进入Dropbox触发事件
      dropbox.on('dragover', function(){
        $(this).addClass('hover');
      });
      dropbox.on('dragleave', function(){
        $(this).removeClass('hover');
      });
      dropbox.on('drop', function(e){
        $(this).removeClass('hover');

        var files = e.originalEvent.dataTransfer.files;
        var formData = new FormData();
        formData.append('file', files[0]);

        $.ajax({
          url: 'upload.php',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(res){
            alert('上传成功！');
          },
          error: function(){
            alert('上传失败！');
          }
        });
      });
    });
  </script>
</body>
</html>

这个示例实现了文件的拖拽上传，你只需将拖拽的文件从电脑窗口拖拽至“拖拽或点击上传文件”的空白处即可启用上传功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery实现异步上传文件 - Python技术站