【H5】文件上传（ajax）

在HTML5中，可以使用FormData对象和XMLHttpRequest（或Fetch API）来实现文件的异步上传。以下是使用这些技术的示例代码：

HTML部分：

<form id="uploadForm">
    <input type="file" id="fileInput" name="file">
    <button type="button" id="uploadBtn">上传文件</button>
</form>

JavaScript部分（使用jQuery）:

$(document).ready(function() {
    $('#uploadBtn').click(function() {
        var formData = new FormData();
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        formData.append('file', file);
 
        $.ajax({
            url: 'upload.php', // 服务器端的上传文件接口
            type: 'POST',
            data: formData,
            processData: false,  // 告诉jQuery不要处理发送的数据
            contentType: false,  // 告诉jQuery不要设置Content-Type请求头
            success: function(response) {
                console.log('文件上传成功:', response);
            },
            error: function(xhr, status, error) {
                console.log('文件上传失败:', status, error);
            }
        });
    });
});

服务器端 (upload.php):

<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $tmpName = $_FILES['file']['tmp_name'];
    $name = $_FILES['file']['name'];
    move_uploaded_file($tmpName, "uploads/$name");
    echo "文件上传成功";
} else {
    echo "文件上传发生错误";
}
?>

确保服务器配置正确，允许通过PHP上传文件。上述代码中，当用户选择文件并点击上传按钮后，文件会被异步上传到服务器的指定接口。