如何使用AJAX和FormData进行文件上传？-js教程-PHP中文网

如何使用AJAX和FormData进行文件上传？

Susan Sarandon

发布： 2024-12-16 08:45:10

原创

771 人浏览过

How to Use AJAX and FormData for File Uploads?

使用 FormData 进行 AJAX 文件上传

在动态 HTML 的上下文中，您已通过拖放生成了文件上传表单并具有用于使用 AJAX 提交表单的 JavaScript 代码。但是，为了方便使用 FormData 上传文件，您需要进行调整。

准备工作

要使用 FormData，请选择以下选项之一：

提供完整表格处理：

var form = $('form')[0];
var formData = new FormData(form);

登录后复制

为 FormData 指定精确数据：

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);

登录后复制

发送表单

使用提供的 jQuery 片段：

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false,
    processData: false,
    // ... Other options like success and etc
});

登录后复制

This请求将模仿常规表单提交，并使用 enctype="multipart/form-data"，让您成功上传文件。

注意： 请记住在选项中指定类型：“POST” ，因为文件上传需要 POST 请求。

更新： 从 jQuery 1.6 开始，contentType: false 为支持。

以上是如何使用AJAX和FormData进行文件上传？的详细内容。更多信息请关注PHP中文网其他相关文章！