ajax post异步传图代码

### 使用 Ajax 进行 POST 请求异步上传图片

为了实现通过 `Ajax` 发送 `POST` 请求来异步上传图片，可以利用 JavaScript 的 `XMLHttpRequest` 对象以及 `FormData` 接口。下面是一个完整的代码示例：

#### HTML 部分

<form id="uploadForm">
    <input type="file" name="imageFile" />
    <button type="submit">Upload</button>
</form>

<div id="response"></div>

#### JavaScript 部分

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var formElement = document.getElementById('uploadForm');
    var formData = new FormData(formElement);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/your-server-endpoint", true);  // 设置为异步模式[^2]

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('response').innerHTML = 'Server response: ' + xhr.responseText;
        }
    };

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            console.log(`Progress: ${Math.round((event.loaded / event.total) * 100)}%`);
        }
    };

    xhr.send(formData);
});

这段代码展示了如何创建一个简单的文件上传表单并监听提交事件，在阻止默认行为后构建 `FormData` 实例并将它传递给 `XMLHttpRequest` 的 `send()` 方法以发起异步请求。