2012-08-04 2 views
4

J'utilise un formulaire dans un LightBox qui contient un élément d'entrée.La demande a été rejetée car aucune limite de multipart n'a été trouvée

<form name="imageUploadForm" action="uploadImage.do" method="post" enctype="multipart/form-data"> 
<input type="text" id="id" name="id" style="display: none;" value=""> 
    <div id="fileUploaderDiv"> 
     <input type='file' name="file0" id ="file0" /> 
    </div> 
<input type="submit" value="Submit"> 
</form> 

lorsque je soumets le formulaire que le formulaire rediriger vers son emplacement d'action. Je veux juste soumettre un formulaire sans rediriger l'utilisateur, donc l'utilisateur reste sur lightbox sans perdre ses données.

J'ai essayé jquery ajax appel pour cette

var data = new FormData(); 
var $inputs = $('#imageUploadForm :input'); 
var values = {}; 
    $inputs.each(function() { 
       values[this.name] = $(this).val(); 
       data.append(this.name, $(this).val()); 
      }); 
$.ajax({ 
       url: 'uploadImage.do', 
       data: data, 
       cache: false, 
       contentType: 'multipart/form-data', 
       processData: false, 
       type: 'POST', 
       success: function(data){ 
        alert(data); 
       } 
      }); 

Mais obtenir erreur du côté serveur dans mon servlet FileUploader.

The request was rejected because no multipart boundary was found 

Quelqu'un peut-il me dire ce qui me manque?

+0

Rechercher AJAX. – elclanrs

+0

yup AJAX devrait le faire. –

+0

Avoir le bouton soumettre déclencher un événement JS, rassembler les données et (comme elclanrs dit) -> AJAX – dgeare

Répondre

1

Voici la forme la plus simple d'une soumission de formulaire utilisant jquery Ajax. Je n'ai pas testé, mais il devrait fonctionner :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test form</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#sbmt').click(function(){ 
      var text1 = $('#text1').val(); 
      var text2 = $('#text2').val(); 
      /// validation of inputs 
      ///then 
      $.ajax(
      { 
       url :'submit.php', 
       type : 'post', 
         data : {'text1' : text1, 'text2' : text2 }, 
       success: function(data){ 
         alert("form submitted . response is :"+ data); 
        } 
      } 
      ).fail(function(){alert("Failed!!");}); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="myform"> 
     <input type="text" id="text1" /> 
     <input type="text" id="text2" /> 
     <input type="button" id="sbmt" value="submit"/> 
    </form> 
</body> 
</html> 
+0

Par ailleurs, il semble maintenant que vous voulez passer un fichier avec le formulaire. C'est plus complexe que ça. Recherche de Valums Uploader dans google. C'est un bon uploader si vous avez besoin de télécharger le fichier ajax – Gogol

+0

Impressionné par l'effort que vous avez mis en avant. :-) – dgeare

+0

Merci l'homme. J'adore l'échange de pile et j'ai beaucoup appris d'ici. Donc, j'essaie de répondre à tout ce que je peux, en retour :) – Gogol

2

Vous devez empêcher l'action par défaut de soumettre le formulaire:

$('form[name="imageUploadForm"]').on('submit', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
      type: 'POST', 
      url: 'uploadImage.do', 
      data: data, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(data){ 
       alert(data); 
      } 
    }); 
}); 

Je crois que vous devez définir l'option contentType false lors de l'utilisation la classe FormData, forçant jQuery à ne pas ajouter d'en-tête Content-Type, sinon la chaîne de délimitation sera manquante, et c'est probablement la raison de votre erreur de serveur.

Vous devez également laisser false l'indicateur processData, sinon jQuery essayera de convertir votre FormData en une chaîne qui échouera.

+0

J'ai essayé votre solution, mais google chrome lançait un TypeError Uncaught: Invocation illégale. b_ f.extend.param f.extend.ajax (fonction anonyme) de f.event.dispatch f.event.add.h.handle.i –

Questions connexes