jquery ajax实现上传文件

在 jQuery 中使用 AJAX 实现文件上传通常涉及到以下几个步骤：

        1、创建一个 HTML 表单用于文件选择。

        2、使用 FormData 对象来收集表单数据。

        3、使用 jQuery 的 $.ajax() 方法发送 AJAX 请求。

下面是一个示例代码，展示了如何使用 jQuery 和 AJAX 实现文件上传：

HTML:

<form id="upload-form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" id="uploadFile">
    <button type="submit">上传</button>
</form>

JavaScript (使用 jQuery):

$(document).ready(function() {
    $('#upload-form').on('submit', function(e) {
        e.preventDefault(); // 阻止表单的默认提交行为
        
        var formData = new FormData(this); // 创建一个 FormData 对象
        
        $.ajax({
            url: '/upload', // 服务器端处理脚本的 URL
            type: 'POST',
            data: formData,
            contentType: false, // 不设置内容类型，因为使用了 FormData
            processData: false, // 不处理数据，因为使用了 FormData
            success: function(response) {
                console.log('文件上传成功');
                console.log(response);
            },
            error: function(error) {
                console.error('文件上传失败');
                console.error(error);
            }
        });
    });
});

在这个例子中，监听了表单的 submit 事件，阻止了默认的提交行为，然后使用 FormData 收集表单数据，并通过 $.ajax() 发送 POST 请求到服务器端的 upload.php 脚本。

注意，由于文件上传通常需要使用 multipart/form-data 编码类型，所以必须将 contentType 设置为 false 并且 processData 也设置为 false，以确保正确的数据格式被发送给服务器。