it-swarm.com.de

Senden eines Formulars mit Dateieingaben über AJAX

Ich finde eine Möglichkeit, das Formular zu übermitteln, das eine Dateieingabe zusammen mit einigen anderen Texteingaben enthält.

Ansicht Dies ist eine einfache Ansicht mit einem Textfeld, einem Dateifeld und ausgeblendeten Feldern

<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 Controller-Methode, um die Ajax-Anforderung zu erfassen und zur Verarbeitung an model zu übergeben

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;
}

Modell Tatsächliches Modell für die Verarbeitung. Zum Debuggen habe ich nur ein print_r für die Formulardaten eingefügt, um zu prüfen, ob alle Daten auf dem Formular den Server erreichen.

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

Ajax Wird ausgelöst, wenn auf die Schaltfläche geklickt wird. Hiermit wird das Formular an den Server gesendet, um den Bildupload durchzuführen.

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);
    }
  });
});

Problem

Wenn ich das Formular über AJAX in der obigen Methode abschicke, werden nur der Text und die ausgeblendeten Elemente an das Formular gesendet, nicht jedoch an die ausgewählte Bilddatei.

Während des Googelns habe ich einen anderen Thread gefunden, in dem erklärt wird, wie das Formular mit allen Eingabetypen gesendet werden kann. Ich bin jedoch nicht in der Lage, es in Joomla zum Laufen zu bringen.

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

Können mir einige dabei helfen?.

3
Malaiselvan

Ich habe es geschafft, damit es funktioniert. Das Gleiche teilen, was anderen helfen kann.

Keine Änderung an Formular und Controller. Leichte Veränderungen am Modell und am Ajax

Modell

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;
});

Grundsätzlich wird durch Klicken auf die Schaltfläche das Formular gesendet und AJAX wird beim Senden der Seite ausgelöst. Der Rückgabewert false bewirkt keine Aktualisierung der Seite.

5
Malaiselvan