Salut à tous,

Je bloque depuis hier midi sur un point technique, je n'arrive pas à envoyer en ajax une image que je souhaite upload.

Fonction toute simple :

			// Upload du fichier image
			$('#fmUpload').submit(function(){
				file = $('#image').val();
				alert(file);
				$.post("ajax_php.php", {file:file}, function(data){
					alert(file);
					$('#zoneReponse').html(data);
				});
				return false;
			});

Mais sur mon autre page quand je tente de la récupérer ça me dire que la variable est vide. Au mieu j'arrive à récupéré (comme le cas dans la fonction) la valeur de mon input file soit le lieu ou se trouve l'image en local...

Merci par avance =)

bonjour,

et si tu rajoutes un contentType ?

$('#fmUpload').submit(function(event){
    file = $('#image').val();
    contentType:attr( "enctype", "multipart/form-data" ),
    $.post("ajax_php.php", {file:file}, function(data){
        $('#zoneReponse').html(data);
    });
    return false;
});

 EDIT: ou plutôt :

$("#fmUpload").submit(function(event) { 
  var fileUp = $("#fmUpload").serialize(); 
  $.ajax({  
    type: "POST", 
    contentType: attr( "enctype", "multipart/form-data" ),
    url: "ajax_php.php",  
    data: fileUp,  
    success: function( data ) {  
      $("#zoneReponse").html(data);  
    }  
  });  
  return false;  
});   

?

-
Edité par Chooselife 5 avril 2013 à 17:25:03

@Chooselife : Elle sort d'où cette fonction "attr"?

sinon le vrai problème c'est qu'on NE PEUT PAS envoyer une image en AJaX.

-
Edité par Nami Doc 6 avril 2013 à 13:44:25

Voir par la

http://blueimp.github.io/jQuery-File-Upload/

On peut upload avec javascript, on peut même download (je m'en sers pour avoir un barre de progression sur du chargement de très grosses images).

Par contre à mon connaissance c'est pas implémenté dans jQuery.

On peut toujours surcharger l'objet natif "xhr" de jQuery si le navigateur supporte XMLHttpRequest niveau 2.

cf. http://stackoverflow.com/questions/8437544/xhr-level2-with-jquery-for-file-upload

Sinon y'a plus simple

http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-slicing-files

T.

kaen25 a écrit:

Voir par la

http://blueimp.github.io/jQuery-File-Upload/

On peut upload avec javascript, on peut même download (je m'en sers pour avoir un barre de progression sur du chargement de très grosses images).

Par contre à mon connaissance c'est pas implémenté dans jQuery.

En JavaScript, oui. En AJaX, non. Mais on peut faire semblant avec une iframe

@Nami Doc parce que Ajax c'est pas du JavaScript ?

Et la dernière version de XmlHttpRequest supporte l'envoi de fichiers : http://www.w3.org/TR/XMLHttpRequest2/

@Tracker après avoir lu le fichier avec JavaScript tu l'upload comment ?

@nightmat
Tu peux lire les chunks en format texte (base64) et donc les envoyer via ajax à toi de recoller les morceaux en php.

T.

-
Edité par Tracker 8 avril 2013 à 1:28:45

C'est bien ce qui me semblait ; du coup autant passer directement par une requête AJAX non ?

Texte ou blob (chunk envoyé directement via l'object xmlhttpresquestuload) dépend du contexte de ton projet, perso je bosse sur un bouquet d'applis web. Le choix technique fait pour assurer l’interaction avec le serveur est JsonRpc strict (donc pas de contrôle direct d'xmlhttp et tant mieux ). Le format base64 permet du coup d'écrire des API assurant le transfert d'informations binaires. Dans ce cadre tu peux implémenter des API pour aller encore plus loin comme récupérer la liste des fichiers interrompus et en demander la reprise à l'utilisateur... ou l'upload non bloquant en tâche de fond, laissant l'utilisateur continuer son travail dans l'appli.

T.

-
Edité par Tracker 8 avril 2013 à 9:59:59

@Nami Doc parce que Ajax c'est pas du JavaScript ?

Bah, non, Ajax != Javascript ... Et j'ai toujours tendance à penser qu'on a pas accès aux toutes dernières nouveautés (conseillons d'utiliser les classes non?)

-
Edité par Nami Doc 8 avril 2013 à 10:19:21

@Tracker à ce compte-là je crois qu'on abandonne la simplicité pour l'OP  (wow je peux pas sauter une ligne correctement après un smiley)

@Nami Doc je n'ai pas dit AJAX = JavaScript. AJAX n'est pas un langage ; ça n'a pas de sens de dire qu'il n'implémente pas l'upload de fichiers. L'implémentation dépend maintenant du support de XMLHttpRequest : http://caniuse.com/#feat=xhr2

Niveau compatibilité la solution de Tracker est kif-kif avec l'utilisation de XMLHttpRequest 2. Et honnêtement je ne sais pas si ça vaut le coup  d'utiliser le hack de l'iframe. Perso je laisserais les utilisateurs avec des "vieux" navigateurs passer par un upload synchrone classique, mis ça n'engage que moi 

Salut tout le monde, apres avoir galeré pendant un bon moment a chercher comment uploader  des fichiers (notament des images en ajax), voici les petit plugin jquery que j'ai crée et que vous pouvez l'amelioré et l'adapté

jQuery(function($){

   $.fn._serialize = function(){

     form = this;

     fd = new FormData();

     function _(el){return document.getElementById(el);}

    $('form').find("input[type='file']").each(function(){

       var id = $(this).attr('id');

       fd.append(id, _(id).files[0]);

    });

  $('form').find('input,textarea').each(function(){

      if($(this).attr('type') != "file"){

         fd.append($(this).attr('name'),$(this).val());

     }

  });

  return fd;

}

$.fn._upload = function(options){

   form = this;

   fd = new FormData(); 

   request = new XMLHttpRequest();

   request.addEventListener("load",complete,false);

   request.open(form.attr('method'),form.attr('action'));

   request.send(form._serialize());

   function complete(ev){

     res = ev.target.response;

     options.response(res);

   }

}

});

$(function(){

   //exemple

   $('form').submit(function(e) {

       $(this)._upload({

            response : function (res){

              alert(res);//on alert les info de la page traitement

           }

      });

     e.preventDefault();

  });

});

J'espère qu'il va eviter a d'autre de galeré comme moi 

-
Edité par mamadouhadybarry 24 août 2016 à 0:51:35

Si tu avais lu la spéc de FormData j'aurais presque pardonné que tu déterres ce topic, mais là ton code est pourri.

Serte, cela part d'une bonne intention mais déterrage ainsi qu'absence de balise code, ce n'est pas ce que l'on fait de mieux.

Le sujet été mort depuis 3 ans, je ferme.