ajax 上传附件demo

AJAX（Asynchronous JavaScript and XML）是一种用于在Web应用程序中发送和接收数据的技术。它通过在后台与服务器进行数据交换，能够在不刷新整个页面的情况下更新部分页面内容。在附件上传的场景中，利用AJAX可以实现实时上传和进度展示，提升用户体验。以下是一个基于AJAX的附件上传的示例。

示例说明

假设我们正在开发一个社交网络应用程序，用户可以在其中发布帖子并附带图片作为附件。为了提供更好的用户体验，我们希望能够实时展示图片的上传进度，并在上传完成后显示预览图。

HTML结构

<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" name="attachment" id="attachmentInput" />
    <input type="submit" value="上传" />
</form>
<div id="progressBar"></div>
<div id="preview"></div>

JavaScript代码

// 监听表单提交事件
document.getElementById("uploadForm").addEventListener("submit",function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var attachmentInput = document.getElementById("attachmentInput");
    
    if (attachmentInput.files.length === 0) {
        alert("请选择一个附件");
        return;
    }
    
    var formData = new FormData(); // 创建FormData对象，用于发送表单数据
    
    // 将附件添加到FormData对象中
    formData.append("attachment",attachmentInput.files[0]);
    
    var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
    
    // 监听上传进度事件
    xhr.upload.addEventListener("progress",function(event) {
        if (event.lengthComputable) {
            var percentage = Math.round((event.loaded / event.total) * 100);
            var progressBar = document.getElementById("progressBar");
            progressBar.style.width = percentage + "%";
            progressBar.textContent = percentage + "%";
        }
    });
    
    // 监听响应事件
    xhr.addEventListener("load",function(event) {
        if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.success) {
                var preview = document.getElementById("preview");
                preview.innerHTML = "<img src='" + response.url + "' alt='预览图' />";
            } else {
                alert(response.message);
            }
        } else {
            alert("上传失败");
        }
    });
    
    // 发送POST请求
    xhr.open("POST","/upload");
    xhr.send(formData);
});

服务器端代码

服务器端可以使用各种编程语言来处理附件上传。以Node.js为例：

var express = require("express");
var multer = require("multer");
var app = express();

// 配置Multer中间件
app.use(multer({ dest: "uploads/" }).single("attachment"));

// 处理附件上传请求
app.post("/upload",function(req,res) {
    if (!req.file) {
        return res.json({ success: false,message: "未收到附件" });
    }
    
    // 执行附件处理逻辑，比如保存到服务器，生成预览图等
    
    return res.json({ success: true,url: "/uploads/" + req.file.filename });
});

app.listen(3000,function() {
    console.log("服务器已启动");
});

通过以上代码，用户选择一个附件后，点击上传按钮，表单将通过AJAX发送到服务器端的/upload路由。服务器端使用Multer中间件处理附件上传请求，并返回一个JSON对象，其中包含上传成功与否的标识和预览图的URL。

总结

使用AJAX进行附件上传可以实现实时上传进度展示和预览图的功能，提升用户体验。通过监听上传进度事件和响应事件，可以实时更新上传进度条和展示预览图。同时，服务器端也需要对接收到的附件进行相应的处理，比如保存到服务器或生成预览图等。

通过本示例，我们可以看到AJAX在附件上传中的应用，进一步了解并熟悉AJAX技术的使用。