How to Implement a Simple File Upload Using jQuery AJAX and PHP?

jQuery AJAX File Upload with PHP

Issue: Implementing a simple file upload with minimal setup using jQuery AJAX and PHP.

Initial HTML and JavaScript Script:

<!-- 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");
    }
  });
});

Problem Encountered:
Upon uploading a file, an alert showing "[object FormData]" appears, the success alert remains uncalled, and no file is present in the "uploads" folder.

Solution:
To facilitate a file upload, a server-side script is required to handle the file relocation and management.

Updated JavaScript Script:

$('#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
    }
 });
});

Server-Side PHP Script (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']);
}

?>

Additional Considerations:

• Ensure the provided server path to the uploads directory is correct.
• Verify that the uploads directory has write permissions.
• Adjust the move_uploaded_file function parameters to customize the file placement and name.
• Check PHP configuration settings for upload_max_filesize and post_max_size to prevent size-related issues.

The above is the detailed content of How to Implement a Simple File Upload Using jQuery AJAX and PHP?. For more information, please follow other related articles on the PHP Chinese website!