Maison > développement back-end > tutoriel php > Comment implémenter un téléchargement de fichier simple à l'aide de jQuery AJAX et PHP ?

Comment implémenter un téléchargement de fichier simple à l'aide de jQuery AJAX et PHP ?

Linda Hamilton
Libérer: 2024-12-24 03:51:09
original
891 Les gens l'ont consulté

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

Téléchargement de fichiers jQuery AJAX avec PHP

Problème : Implémentation d'un téléchargement de fichier simple avec une configuration minimale à l'aide de jQuery AJAX et PHP.

HTML et JavaScript initiaux Script :

<!-- HTML -->
<input>
Copier après la connexion
<!-- 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");
    }
  });
});
Copier après la connexion

Problème rencontré :
Lors du téléchargement d'un fichier, une alerte affichant "[object FormData]" apparaît, l'alerte de réussite reste non appelée , et aucun fichier n'est présent dans les "uploads" dossier.

Solution :
Pour faciliter le téléchargement d'un fichier, un script côté serveur est requis pour gérer la relocalisation et la gestion des fichiers.

Mise à jour Script 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
    }
 });
});
Copier après la connexion

Script PHP côté serveur (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']);
}

?>
Copier après la connexion

Considérations supplémentaires :

  • Assurez-vous que le chemin du serveur fourni vers le répertoire de téléchargement est correct.
  • Vérifiez que le répertoire de téléchargement dispose des autorisations en écriture.
  • Ajustez le move_uploaded_file paramètres de fonction pour personnaliser l'emplacement et le nom du fichier.
  • Vérifiez les paramètres de configuration PHP pour upload_max_filesize et post_max_size pour éviter les problèmes liés à la taille.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal