jquery ajax实现文件上传提交的实战步骤

这里是"jquery ajax实现文件上传提交的实战步骤"的完整攻略。

步骤一：设置HTML表单

首先需要在网页中设置一个表单，用于选择和上传文件。表单可设置如下：

<form enctype="multipart/form-data" method="post">
    <input type="file" name="file">
    <input type="button" value="上传" onclick="uploadFile()">
</form>

在这里，我们用到了input类型为“file”的表单元素，通过选择本地文件进行上传。

步骤二：编写JavaScript代码

通过JavaScript的Ajax模块，实现文件上传。
我们的JavaScript脚本如下所示：

function uploadFile() {
    var formData = new FormData();
    formData.append('file', $('input[type=file]')[0].files[0]);
    $.ajax({
        url: '/upload',
        type: 'post',
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(data);
        }
    });
}

在这里，我们定义了一个uploadFile()函数，该函数会做以下几件事情：

1. 初始化一个formData对象，用于存储文件数据
2. 给formData对象添加一个file属性，这个属性的值是通过表单元素获取的
3. 向服务器发送一个post请求，同时将formData对象作为请求的数据
4. 禁止jQuery对请求数据进行处理（因为formData已经是符合要求的数据了）
5. 禁止jQuery对请求头进行设置（因为formData已经包含了请求头信息）
6. 如果上传成功，回调函数中将服务器返回的数据输出到控制台中。

步骤三：服务端代码

后台服务代码依赖于我们所使用的应用框架，以下以Node.js Express框架为例。

const express = require('express');
const path = require('path');
const multer = require('multer');

const app = express();

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/files')
    },
    filename: function (req, file, cb) {
        const ext = path.extname(file.originalname);
        cb(null, file.fieldname + '-' + Date.now() + ext);
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
    res.send('/files/' + req.file.filename);
});

app.listen(3000, () => console.log('server started at http://localhost:3000'));

在这里，我们首先使用multer中间件处理文件上传，并配置保存路径和文件名规则。
然后，我们路由到/upload并使用upload.single中间件，该中间件将请求的文件存储到本地，并发送一个文件路径到客户端。

以上就是本次操作的整个流程。以下提供两个实际应用的示例:

实例1：图片上传
这是网页提供上传图片的功能，上传成功后以图片的形式显示在页面上。

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

<div id="show-image"></div>

<script>
  $(function () {
      $('form').submit(function (e) {
          e.preventDefault();
          var formData = new FormData();
          formData.append('file', $('#upload-file')[0].files[0]);
          $.ajax({
              url: '/upload',
              type: 'post',
              data: formData,
              processData: false,
              contentType: false,
              success: function (data) {
                  $('#show-image').html('<img src="' + data + '">');
              }
          });
      });
  });
</script>

实例2：文件上传进度条
这是网页提供文件上传进度条功能，上传的同时显示上传进度。

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

<div id="progress-bar" style="width: 0%; height: 10px; background: green;"></div>

<script>
  $(function () {
      $('form').submit(function (e) {
          e.preventDefault();
          var formData = new FormData();
          formData.append('file', $('#upload-file')[0].files[0]);

          $.ajax({
              xhr: function () {
                  var xhr = new window.XMLHttpRequest();
                  xhr.upload.addEventListener('progress', function (e) {
                      if (e.lengthComputable) {
                          var progress = e.loaded / e.total * 100;
                          $('#progress-bar').css('width', progress + '%');
                      }
                  });
                  return xhr;
              },
              url: '/upload',
              type: 'post',
              data: formData,
              processData: false,
              contentType: false,
              success: function (data) {
                  console.log('upload success: ' + data);
              }
          });
      });
  });
</script>

以上就是文件上传的两个实际示例。可以看出，通过jQuery的Ajax模块，文件上传不再需要使用传统的表单提交方式。同时，我们可以通过Ajax的回调函数实现灵活的文件上传反馈和进度条功能。