如何使用 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中文網其他相關文章！