如何使用jQuery异步上传文件

当我们上传文件时，一般会使用form表单提交的方式，这种方式会导致浏览器刷新并且页面上的其他操作会被暂停。但是我们可以通过jquery异步上传文件来避免这种情况出现，使用户体验更加流畅。下面是“如何使用jQuery异步上传文件”的完整攻略。

1. 引入jQuery库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 创建显示上传进度的元素

我们需要在页面上创建一个元素用来显示文件上传的进度，比如一个进度条或者一个文本框。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

3. 创建文件上传表单

<form id="file_upload_form" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <input type="submit" value="上传">
</form>

4. 使用ajax发送文件

当用户选择了文件并点击上传按钮时，我们需要使用ajax发送文件并在发送时显示上传进度。

$(function() {
  $('form#file_upload_form').submit(function(e){
    e.preventDefault(); //禁止表单提交
    var formData = new FormData(this);
    $.ajax({
      url: 'upload.php', //文件上传接口
      type: 'POST',
      data: formData,
      dataType: 'json',
      xhr: function() { //需要获取上传进度
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(evt) {
          if(evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            $('.progress-bar').css({
              width: percentComplete * 100 + '%'
            });
          }
        }, false);
        return xhr;
      },
      success: function(data) {
        //成功后的处理
      },
      error: function(xhr) {
        //错误处理
      },
      cache: false,
      contentType: false,
      processData: false
    });
  });
});

5. 服务器端处理上传的文件

在服务器端，我们需要根据表单上传的文件来处理文件，并返回处理结果。具体处理方式与语言及框架相关。

下面是两个示例说明：

示例1：PHP服务器端

<?php
if ($_FILES["file"]["error"] > 0) {
    echo json_encode(array('status'=>'error','msg'=>'上传出错:'.$_FILES["file"]["error"]));
} else {
    $target_path = 'uploads/'.$_FILES['file']['name'];
    if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
        echo json_encode(array('status'=>'success','msg'=>'上传成功'));
    } else{
        echo json_encode(array('status'=>'error','msg'=>'上传失败'));
    }
}
?>

示例2：Node.js服务器端

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload());

app.post('/upload', function(req, res) {
  let sampleFile = req.files.file;
  sampleFile.mv('uploads/' + sampleFile.name, function(err) {
    if(err)
      return res.status(500).send(err);
    res.json({'status':'success','msg':'上传成功'});
  });
});

app.listen(3000, function() {
  console.log('文件上传服务已启动');
});

以上就是“如何使用jQuery异步上传文件”的完整攻略。当用户选择一个文件并点击上传时，文件会被异步上传到服务器端，期间会通过进度条展示上传过程，上传完成后会进行处理，并返回处理结果。