jQuery.form插件的使用及跨域异步上传文件

jQuery.form插件是一款非常常用的用于异步提交表单和上传文件的插件，具有使用方便、兼容性好等优点。同时，跨域异步上传文件也是很多web应用开发中需要面对的问题。下面将提供一份“jQuery.form插件的使用及跨域异步上传文件”的完整攻略。

一、jQuery.form插件的基本使用方法

1.1 引入jQuery和jQuery.form插件

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

1.2 HTML表单的准备

HTML表单中必须要包含上传文件的input标签，例如：

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

1.3 准备JS代码

$('#myForm').ajaxForm({
  url: 'upload.php',
  type: 'post',
  dataType: 'json',
  success: function(response) {
    console.log(response);
  },
  error: function() {
    console.log('上传失败');
  }
});

1.4 解析代码

第一行代码通过$('#myForm')获取表单DOM元素并调用它的.ajaxForm()方法，实现了将表单以Ajax方式提交。
传入了一个配置对象，url表示表单提交地址，type表示请求方式，dataType表示要求返回数据格式为JSON，success表示请求成功时的回调函数，error表示请求失败时的回调函数。这一步是非常关键的，其中dataType需要根据实际返回的数据格式进行设置。
在请求成功后，回调函数获取的参数response就是服务器返回的数据，可以进行一些相应的操作，例如前端的页面刷新等。

二、跨域异步上传文件

一般情况下，由于安全原因，浏览器不允许跨域上传文件。这时我们可以使用HTML的file控件的特性：在表单提交时，HTML的file控件会将文件的二进制数据读入到内存中，然后使用Ajax向服务器发送二进制数据，这样就可以解决跨域文件上传的问题。

2.1 准备HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>跨域上传文件</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
</head>
<body>
  <form id="myForm" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="hidden" name="serverUrl" value="http://localhost:3000/upload">
    <button type="submit">上传文件</button>
  </form>

  <script>
    $(function() {
      $('#myForm').ajaxForm({
        beforeSubmit: function(formData) {
          var serverUrl = formData[1].value;
          var file = formData[0].files[0];

          var xhr = new XMLHttpRequest();
          xhr.open('POST', serverUrl, true);
          xhr.onload = function() {
            console.log(xhr.responseText);
          };
          xhr.send(file);
          return false;
        }
      });
    });
  </script>
</body>
</html>

2.2 解析代码

在表单中新增隐藏域<input type="hidden" name="serverUrl" value="http://localhost:3000/upload">，用于存储服务器的地址。
在Ajax请求前使用beforeSubmit配置项自定义请求体，实现了自定义Ajax的提交功能。其中，formData会按照表单input的顺序生成一个数组，每个元素包含一个名为name的String属性和一个名为value的值。我们可以通过formData[1].value获取隐藏域中存储的服务端地址。同时，使用formData[0].files[0]获取用户选中的要上传的文件，用于后续的操作。
创建并打开一个新的XMLHttpRequest，在传入表单的要上传的文件xhr.send(file)之后，使用xhr.onload回调函数处理返回的结果。在这里，我们直接使用JavaScript原生的XMLHttpRequest对象以实现文件上传功能。当然，也可以使用其他封装好的ajax上传文件插件。

2.3 一个完整的跨域上传文件的示例

可以使用vue-cli3创建一个新的vue项目作为服务端的测试案例：

cmd运行vue create server命令进入vue-cli创建新的vue项目。
在新的vue项目中，App.vue文件内容如下：

<template>
  <div class="container">
    <input type="file" @change="uploadFile">
    <p>{{ tips }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tips: '选择文件后点击上传'
    }
  },
  methods: {
    uploadFile () {
      var file = event.target.files[0];
      if (file) {
        var formData = new FormData();
        formData.append('file', file);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:3000/upload', true);
        xhr.onload = function() {
          var response = JSON.parse(xhr.responseText);
          this.tips = response.message;
        }.bind(this);
        xhr.send(formData);
      }
    }
  }
}
</script>

在服务端项目中，index.js文件内容如下：

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const cors = require('cors');

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads');
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

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

const app = express();

app.use(express.static(__dirname));

app.use(cors());

app.use(bodyParser.json());

app.post('/upload', upload.single('file'), function(req, res) {
  console.log(req.file);
  res.json({ message: '上传成功' });
});

const server = app.listen(3000, function () {
  console.log('服务已启动，端口：3000');
});

在cmd中进入vue项目的目录，运行npm run serve命令启动前端的服务。
在新的cmd中，进入服务端的目录，运行node index.js启动服务端的程序。
在浏览器中，访问前端的地址，选择文件后上传测试。

总结

本文讲述了jQuery.form插件的基本用法和跨域异步上传文件中需要注意的内容，同时提供了一个完整的示例供读者参考。当然，在实际开发中，需要根据具体的需求进行适当地修改和定制，以实现更为完善和高效的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery.form插件的使用及跨域异步上传文件 - Python技术站