如何使用 jQuery AJAX 和 PHP 实现简单的文件上传？

使用 PHP 进行 jQuery AJAX 文件上传

问题：使用 jQuery AJAX 和最少的设置实现简单的文件上传PHP。

初始 HTML 和 JavaScript脚本：

<!-- HTML -->
<input>

<!-- JavaScript -->
$("#upload").on("click", function() {
  var file_data = $("#sortpicture").prop("files")[0];
  var form_data = new FormData();
  form_data.append("file", file_data);
  alert(form_data);
  $.ajax({
    url: "/uploads",
    dataType: 'script',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,
    type: 'post',
    success: function() {
      alert("works");
    }
  });
});

遇到的问题：
上传文件时，出现显示“[object FormData]”的警报，成功警报仍未调用，并且“上传”中不存在任何文件

解决方案：
为了方便文件上传，需要一个服务器端脚本来处理文件重定位和管理。

已更新JavaScript 脚本：

$('#upload').on('click', function() {
  var file_data = $('#sortpicture').prop('files')[0];
  var form_data = new FormData();                  
  form_data.append('file', file_data);
  alert(form_data);                             
  $.ajax({
    url: 'upload.php', // Point to server-side PHP script 
    dataType: 'text',  // Expect a response from the PHP script
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(php_script_response){
      alert(php_script_response); // Display response from the PHP script
    }
 });
});

服务器端 PHP 脚本(upload.php):

<?php if ( 0 < $_FILES['file']['error'] ) {
  echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
  move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}

?>

其他注意事项：

• 确保提供的上传目录的服务器路径正确。
• 验证上传目录是否有写权限。
• 调整move_uploaded_file 函数参数可自定义文件位置和名称。
• 检查 PHP 配置设置中的 upload_max_filesize 和 post_max_size 以防止与大小相关的问题。

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