Home >Backend Development >PHP Tutorial >How to Implement a Simple File Upload Using jQuery AJAX and PHP?

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

Linda Hamilton
Linda HamiltonOriginal
2024-12-24 03:51:09815browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn