ajax上传文件的写法—无刷新上传文件

ajax上传文件的写法—无刷新上传文件

AJAX（Asynchronous JavaScript and XML）是一种基于JavaScript和XML的技术，可以实现无刷新更新页面。在上传文件时，使用AJAX可以避免页面刷新，提高用户体验。AJAX上传文件的基本原理是通过XMLHttpRequest对象向服务器发送异步请求，将文件数据发送到服务器，服务器接收到文件后进行处理，返回响应结果。

前端实现AJAX上传文件

前端实现AJAX上传文件需要用到FormData对象，它可以将表单数据转化为键值对，方便上传文件。代码如下：

上传
    var form = document.getElementById("uploadForm");
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        var formData = new FormData(form);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/upload");
        xhr.send(formData);
    });

在这个例子中，我们创建了一个表单，包含一个文件上传输入框和一个提交按钮。当用户点击提交按钮时，我们使用FormData对象将表单数据转化为键值对，然后使用XMLHttpRequest对象向服务器发送POST请求，将FormData对象作为请求体发送到服务器。

后端实现文件上传处理

后端实现文件上传处理需要使用Node.js的第三方模块multer。multer是一个Node.js中间件，用于处理multipart/form-data类型的表单数据，支持文件上传。代码如下：

const express = require("express");
const multer = require("multer");
const app = express();
const upload = multer({ dest: "uploads/" });
app.post("/upload", upload.single("file"), (req, res) => {
    res.send("文件上传成功！");
});
app.listen(3000, () => {
    console.log("服务器已启动！");
});

在这个例子中，我们使用multer中间件处理文件上传。multer的参数dest指定文件上传的目录，upload.single(“file”)表示只处理单个文件上传，文件上传的名字为file。当文件上传成功后，我们向客户端返回一个字符串表示文件上传成功。

添加文件上传进度条

为了提高用户体验，我们可以添加文件上传进度条。在AJAX上传文件时，我们可以监听XMLHttpRequest对象的progress事件，获取文件上传进度。代码如下：

上传
    var form = document.getElementById("uploadForm");
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        var formData = new FormData(form);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/upload");
        xhr.upload.addEventListener("progress", function(event) {
            var percent = event.loaded / event.total * 100;
            document.getElementById("progressBar").style.width = percent + "%";
        });
        xhr.send(formData);
    });

在这个例子中，我们添加了一个div元素作为进度条，通过设置div元素的宽度来显示上传进度。在XMLHttpRequest对象的upload属性上监听progress事件，获取上传进度。loaded属性表示已上传的字节数，total属性表示总字节数，通过计算可以得到上传进度的百分比。

处理文件上传错误

在文件上传过程中，可能会出现一些错误，例如文件大小超过限制、文件类型不正确等。我们可以在服务器端进行错误处理，向客户端返回错误信息。代码如下：

const express = require("express");
const multer = require("multer");
const app = express();
const upload = multer({ 
    dest: "uploads/",
    limits: {
        fileSize: 1024 * 1024 // 限制文件大小为1MB
    },
    fileFilter: (req, file, cb) => {
        if (file.mimetype !== "image/png") {
            cb(new Error("文件类型不正确！"), false);
        } else {
            cb(null, true);
        }
    }
});
app.post("/upload", upload.single("file"), (req, res) => {
    res.send("文件上传成功！");
});
app.use((err, req, res, next) => {
    res.status(400).send(err.message);
});
app.listen(3000, () => {
    console.log("服务器已启动！");
});

在这个例子中，我们使用multer的limits属性限制文件大小为1MB，使用fileFilter属性限制文件类型为image/png。当文件大小超过限制或文件类型不正确时，会触发错误回调函数，向客户端返回错误信息。我们在服务器端使用中间件处理错误，向客户端返回400状态码和错误信息。

使用Promise封装AJAX上传文件

为了方便使用，我们可以使用Promise封装AJAX上传文件。代码如下：

function uploadFile(file) {
    return new Promise((resolve, reject) => {
        var formData = new FormData();
        formData.append("file", file);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/upload");
        xhr.upload.addEventListener("progress", function(event) {
            if (event.lengthComputable) {
                var percent = event.loaded / event.total * 100;
                console.log("上传进度：" + percent + "%");
            }
        });
        xhr.addEventListener("load", function(event) {
            console.log("上传成功！");
            resolve(xhr.response);
        });
        xhr.addEventListener("error", function(event) {
            console.log("上传失败！");
            reject(xhr.statusText);
        });
        xhr.send(formData);
    });
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function(event) {
    var file = fileInput.files[0];
    uploadFile(file)
        .then(response => console.log(response))
        .catch(error => console.log(error));
});

在这个例子中，我们定义了一个uploadFile函数，使用Promise封装AJAX上传文件。当文件上传成功时，resolve函数会返回响应结果，当文件上传失败时，reject函数会返回错误信息。我们在文件上传输入框的change事件上调用uploadFile函数，使用then方法处理响应结果，使用catch方法处理错误信息。

使用AJAX上传文件的基本原理和实现方法，包括前端实现AJAX上传文件、后端实现文件上传处理、添加文件上传进度条、处理文件上传错误、使用Promise封装AJAX上传文件等方面。AJAX上传文件可以提高用户体验，避免页面刷新，是Web开发中常用的技术之一。