Heim > Backend-Entwicklung > PHP-Tutorial > Wie implementiert man einen einfachen Datei-Upload mit jQuery AJAX und PHP?

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

Linda Hamilton
Freigeben: 2024-12-24 03:51:09
Original
804 Leute haben es durchsucht

How to Implement a Simple File Upload Using jQuery AJAX and 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>
Nach dem Login kopieren
<!-- 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");
    }
  });
});
Nach dem Login kopieren

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
    }
 });
});
Nach dem Login kopieren

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']);
}

?>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage