Web框架开发-Ajax(formData)

以下是一个使用Ajax和FormData发送文件的简单示例。这个例子假设你有一个HTML表单，用户可以选择文件并提交。

HTML 表单:

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

JavaScript 使用Ajax和FormData:

document.getElementById('uploadButton').addEventListener('click', function() {
    var formData = new FormData();
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    formData.append('file', file);
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
 
    xhr.onload = function() {
        if (this.status == 200) {
            console.log('文件上传成功');
        } else {
            console.error('文件上传失败');
        }
    };
 
    xhr.send(formData);
});

这段代码首先获取了文件输入框中的文件，然后将其添加到FormData对象中。接着，它创建了一个XMLHttpRequest对象，并将其打开为POST方法，准备发送请求到服务器的/upload路径。当请求完成时，它会检查HTTP响应状态，并在控制台中输出相应的消息。