[Résolu] Upload d'image sans submit de formulaire

Bonjour,

Voilà je sèche depuis plusieurs heures sur un problème d'upload d'image sans soumission de formulaire en jquery. Le passage du fichier au formulaire d'upload ne ramène rien.

Côté html, j'ai un formulaire tout à fait normal :

<form id="formulaire" action="mapage.php" enctype="multipart/form-data" method="post" >
	<div class="row">
	    <label>User  : </label> <input type="text" name="TITRE" id="TITRE" value="" />
	</div>
	<div class="row">
		<label>Photo  : </label> <input name="ImageFile" id="ImageFile" type="file" accept="image/*"/> 
		
               <span><a class="linkupload" href="#">Télécharger</a> </span>

            <input type="hidden" name="PHOTO" id="PHOTO" value="" />									
	   <button type="submit" name="submit" class="submit">Enregistrer</button>
</form>		   

Au clic sur le lien "Télécahrger", je déclenche le traitement en JS.
Je récupère la valeur du fichier sélectionné, puis j'initialise une "Form" et j'ajoute mon fichier à télécharger.

$(document).ready(function () {
    $(".linkupload").on('click', function(e) {
    e.preventDefault(); 
  
     var file_data = $("#ImageFile").prop("files")[0];   
	 var form_data = new FormData();                  
	 form_data.append("file", file_data)                        
                $.ajax({
                    url: "upload.php",
                    dataType: 'script',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,                        
                    type: 'post',
                    success: function(result){
		                var input_photo = document.getElementById('PHOTO') ;
		                input_photo.value=result;
                    },
				error: function(){
					alert("Erreur lors du téléchargement du fichier");
				} 	        
                });       				
	}); // fin de la fonction clic upload
}); // fin document / ready 

Côté PHP rien de plus simple j'affiche le nom du fichier passer à la page.

echo($_FILES['file']['name']);	

Et là, j'ai une erreur côté PHP "Undefined index: File"
Dans ma requête ajax, je constate que "file" et "filename" passe bien ...

Auriez vous une idée de ce qui provoquerait cette erreur ?
Modifié par Babali (20 Aug 2015 - 02:16)

Bonjour,

La nuit porte conseil ... il manquait dans la page appelante

session_start();

En revanche malgré le retour d'une réponse visible dans la console de débug, je passe toujours dans la gestion des erreurs

error: function(){
					alert("Erreur lors du téléchargement du fichier");
				} 	

Une idée sur cette gestion du retour ?

Salut,

2-3 petits trucs :
- tu as oublié un ";" après .append
- tu peux supprimer l'attribut action de la balise <form> si tu vises la même page
- ET SURTOUT (et voilà pourquoi ça ne fonctionnait pas), tu déclares dans les options de $.ajax une option dataType: 'script' alors que tu appelles un fichier PHP (et non JS) ! Tu peux donc supprimer cette option et tout fonctionnera :

$(".linkupload").on('click', function(e) {
      e.preventDefault(); 
    
      var file_data = $("#ImageFile").prop("files")[0];   
      var form_data = new FormData(); 

      form_data.append("file", file_data);
      $.ajax({
        url: "upload.php",
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                        
        type: 'post',
        success: function(result){
          var input_photo = document.getElementById('PHOTO') ;
          input_photo.value = result;
        },
        error: function(){
          alert("Erreur lors du téléchargement du fichier");
        }           
      });               
    }); // fin de la fonction clic upload
  }); // fin document / ready 

Par contre, je vois pas trop l'intérêt de ton script si c'est juste pour modifier la valeur de #PHOTO...
Modifié par MatthieuR (20 Aug 2015 - 14:33)

Merci Mathieu, c'est effectivement ce que je viens de voir en reprenant le code ... comme quoi, après minuit, ça sert plus à rien de coder.

Pour répondre à ta question, le script ne sert pas uniquement à mettre à jour la valeur #PHOTO, j'utilise la page php pour uploader et redimensionner une photo, puis j'alimente la valeur #PHOTO avec le nom renommé de la photo téléchargée.

Merci encore pour ton aide.