Wie implementiert man einen einfachen Datei-Upload mit jQuery AJAX und PHP?

jQuery AJAX-Datei-Upload mit PHP

Problem: Implementierung eines einfachen Datei-Uploads mit minimalem Setup mit jQuery AJAX und PHP.

Anfängliches HTML und JavaScript Skript:

<!-- 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 aufgetreten:
Beim Hochladen einer Datei wird eine Warnung mit der Meldung „[object FormData]“ angezeigt, die Erfolgswarnung bleibt unaufgerufen , und in den „Uploads“ ist keine Datei vorhanden Ordner.

Lösung:
Um das Hochladen einer Datei zu erleichtern, ist ein serverseitiges Skript erforderlich, das die Dateiverschiebung und -verwaltung übernimmt.

Aktualisiert JavaScript-Skript:

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

Serverseitiges PHP-Skript (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']);
}

?>

Zusätzliche Überlegungen:

• Stellen Sie sicher, dass der angegebene Serverpfad zum Upload-Verzeichnis korrekt ist.
• Stellen Sie sicher, dass das Upload-Verzeichnis über Schreibberechtigungen verfügt.
• Passen Sie die Funktion „move_uploaded_file“ an Parameter zum Anpassen der Dateiplatzierung und des Dateinamens.
• Überprüfen Sie die PHP-Konfigurationseinstellungen für upload_max_filesize und post_max_size, um größenbezogene Probleme zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie implementiert man einen einfachen Datei-Upload mit jQuery AJAX und PHP?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!