web-dev-qa-db-fra.com

Soumettre un formulaire avec des entrées de fichier via AJAX

Je trouve un moyen de soumettre le formulaire qui contient une entrée de fichier avec quelques autres entrées de texte.

view Il s'agit d'une vue simple avec une zone de texte, une zone de fichier et des zones cachées.

<form method="post" name="adminForm" id="profile-form" enctype="multipart/form-data" >
  <input type='text' value='hello1'>
  <input type='file' name='profileimage'>
  <input type='button' id='btnimageadd' value='Upload'/>
  ...
  ....
  <input type='hidden' name='task' value='' />
  <input type='hidden' name='option' value='com_mycomponent' />
  <?php echo JHtml::_('form.token'); ?>
</form>

controller Méthode du contrôleur pour intercepter la demande ajax et la transmettre au modèle pour traitement.

public function profilePictureUpload(){
  JRequest::checkToken() or die( 'Invalid Token' );
  $model = $this->getModel();
  $response = $model->uploadPicture();
  JFactory::getDocument()->setMimeEncoding( 'application/json' );
  echo $response ;
  JFactory::getApplication()->close();

  return;
}

modèle Modèle réel pour effectuer le traitement. À des fins de débogage, je viens de mettre un print_r pour le formdata pour vérifier si toutes les données du formulaire atteignent le serveur.

public function uploadPicture() {
   $input = JFactory::getApplication ()->input;
   $formdata = $input->get ( 'jform', '', 'array' );
   print_r($formdata);
   return;
}

Ajax Ceci se déclenchera lorsque le bouton sera cliqué. Ceci consiste à soumettre le formulaire au serveur pour effectuer le téléchargement de l'image.

jQuery('#btnimageadd').on('click', (function(e){
  jQuery('#task').val('profile.profilepictureupload');
  var dataString = jQuery("#profile-form").serialize();

  jQuery.ajax({
    url: "index.php",
    type: "POST",
    data:  dataString,
    cache: false,
    processData:false,
    success: function(result){
      console.log(result);
    },
    error: function(result){
      console.log(result);
    }
  });
});

Problème

Lorsque je soumets le formulaire via AJAX dans la méthode ci-dessus, seuls le texte et les éléments masqués sont uniquement soumis au formulaire, mais pas le fichier image sélectionné.

En cherchant sur Google, j'ai trouvé un autre thread qui explique comment soumettre le formulaire avec tous les types de saisie. Cependant, je ne parviens pas à le faire fonctionner dans Joomla.

https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax

Certains peuvent m'aider à ce sujet.

joomla-3.4ajax
3
Malaiselvan

J'ai réussi à le faire fonctionner. Partage de la même chose qui peut aider les autres.

Aucun changement sur le formulaire et le contrôleur. Légères modifications sur le modèle et ajax

modèle

public function uploadPicture() {
  $input = JFactory::getApplication ()->input;
  $formdata = $input->get ( 'jform', '', 'array' );
  $filedata = $input->files->get ( 'jform' );
  print_r($filedata);
  print_r($formdata);
  return;
}

Ajax

jQuery('#btnimageadd').on('click', (function(e){
    jQuery('#task').val('profile.profilepictureupload');
    Joomla.submitform('', document.getElementById('profile-form'));
});

jQuery('form#profile-form').submit(function(){

  jQuery('#ajax_loader_image_4').show();

  var formData = new FormData(jQuery(this)[0]);
  jQuery.ajax({
    url: "index.php",
    type: "POST",
    data:  formData,
    async: false,
    cache: false,
    contentType:false,
    processData:false,
    success: function(result){
        console.log(result);
    },
    error: function(result){
        console.log(result);
    }
  });

  return false;
});

Fondamentalement, le clic du bouton soumettra le formulaire et AJAX sera déclenché lors de l'envoi de la page. Le renvoi false ne procédera pas à l'actualisation de la page.

5
Malaiselvan