本文档旨在解决在使用 Ajax 和 FormData 进行文件上传时，同时提交文本输入数据遇到的常见问题，例如 PHP 端无法获取 `$_POST` 和 `$_FILES` 数据。我们将详细介绍如何正确配置 HTML 表单、JavaScript 代码以及 PHP 后端，以实现完整的文件和文本数据上传功能。
HTML 表单配置
首先，确保你的 HTML 表单正确设置了 enctype 属性，并且 name 属性在表单中是唯一的。enctype=”multipart/form-data” 是文件上传的关键。
注意事项：
确保每个 input 元素都有唯一的 name 属性。label 元素应该通过 for 属性或直接包裹 input 元素来关联。
JavaScript (jQuery) 代码
使用 JavaScript (jQuery) 创建 FormData 对象，并将表单数据添加到其中。然后，使用 Ajax 发送 FormData 对象。
const form = document.forms.usrupload;form.bttn.onclick = () => { var form_data = new FormData(form); $.ajax({ type: 'POST', dataType: 'text', cache: false, contentType: false, processData: false, url: 'save_data.php', data: form_data, success: function(data) { alert(data) window.location = 'account.php'; } });}
关键点：
contentType: false 和 processData: false 是必须的，因为 FormData 对象会自动处理 Content-Type。直接将 form_data 对象作为 data 属性的值传递给 Ajax 请求。使用 new FormData(form) 可以直接将整个表单的数据添加到 FormData 对象中。
PHP 后端代码
在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局变量来访问上传的数据。
注意事项：
确保在访问 $_FILES 之前，检查文件是否成功上传。进行适当的文件类型和大小验证，以确保安全性。使用 move_uploaded_file() 函数将上传的文件移动到服务器上的安全位置。
完整示例
HTML:
const form = document.forms.usrupload;form.bttn.onclick = () => { var form_data = new FormData(form); $.ajax({ type: 'POST', dataType: 'text', cache: false, contentType: false, processData: false, url: 'save_data.php', data: form_data, success: function(data) { alert(data) window.location = 'account.php'; } });}
PHP (save_data.php):
<?phpif ($_SERVER["REQUEST_METHOD"] == "POST") { $name = $_POST['name']; $title = $_POST['title']; if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) { $file = $_FILES['file']; $filename = $file['name']; $filetmpname = $file['tmp_name']; $filesize = $file['size']; $filetype = $file['type']; // 移动上传的文件到指定目录 $upload_dir = "uploads/"; // 确保该目录存在且可写 $filepath = $upload_dir . $filename; if (move_uploaded_file($filetmpname, $filepath)) { echo "File uploaded successfully!"; } else { echo "Error uploading file."; } } else { echo "No file uploaded or error during upload."; } echo "Name: " . $name . "
"; echo "Title: " . $title . "
";} else { echo "Invalid request method.";}?>
总结：
通过正确配置 HTML 表单的 enctype 属性，使用 JavaScript 创建 FormData 对象，并设置 Ajax 请求的 contentType 和 processData 属性为 false，可以成功地将文件和文本数据一起上传到服务器。在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局变量来访问上传的数据。记住进行适当的验证和错误处理，以确保应用程序的安全性。
以上就是使用 Ajax 和 FormData 实现文件上传及文本数据提交的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1324475.html
微信扫一扫 
支付宝扫一扫 
