jquery ajax实现上传文件

最新推荐文章于 2025-07-11 11:10:24 发布

huanhuan_m1

最新推荐文章于 2025-07-11 11:10:24 发布

阅读量1.7k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery ajax 前端

本文链接：https://blog.csdn.net/m0_72642319/article/details/140440464

在 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, // 不设置内容类型，因为使用了 Fo