Upload multiple images met Jquery en Ajax

Voor een webontwikkeling waren we op zoek naar het volgende:

• uploaden van meerdere figuren met een progress bar
• zonder refresh van de pagina
• automatisch aanmaken van verschillende formaten van de opgeladen figuren

We haalden onze input uit deze en ook deze Jquery Form plugin.

Om bovenstaande te bereiken zijn er 3 bestanden nodig:

• html bestand waarin we het formulier gaan opmaken
• Javascript (Jquery) bestand voor het afhandelen van de nodige Jquery functies
• PHP bestand voor het genereren van de verschillende formaten en het wegschrijven van de figuren naar de server

Het html bestand

Dit is het meest eenvoudige. We hebben nood aan een formulier waarin we één of meerdere (multiple) figuren kunnen opladen. Een input-file met als voorbeeld de volgende eigenschappen:

• name = afbeelding[]
• multiple = multiple

Dit stoppen we dus in een form, en we koppelen er een button aan. Als id geven we aan de button uploadImage.

Het javascript bestand

Jquery zullen we gebruiken om de geselecteerde afbeeldingen door te geven via een Ajax call naar een php bestand. Daarnaast maken we gebruik van de Jquery form plugin om ervoor te zorgen dat het formulier verzonden zal worden zonder een submit (refresh van het browservenster) te gebruiken.

$('#uploadImage').click(function() {
  $('#addpageform').ajaxForm({
    url: 'PATH_TO_PHP_SCRIPT',				
    success: function(data) {
      ACTIONS_AFTER_UPLOAD
  }).submit();
});

De naam #addpageform is de id van het formulier.

In enkele regels de bovenstaande code:

• na het klikken van de button
• submit het formulier met ajaxform
• stuur de ingaves naar een php script
• indien gedaan voer acties uit (dit kan bijvoorbeeld het beeld op het scherm plaatsen zijn)

Het PHP bestand

Het PHP bestand zal ervoor zorgen dat de doorgegeven afbeeldingen op de server komen te staan.

private function uploadEditorAfbeelding()
{
  for($i = 0; $i <= sizeof($_FILES['afbeelding']['name'])-1; $i++) {
    if($_FILES['afbeelding']['name'] != '') {
      $tempFilename = $_FILES["afbeelding"]["tmp_name"][$i];
      $info = SpoonFile::getInfo($_FILES['afbeelding']['name'][$i]);
      $name = $info['name'] . '.' . $info['extension'];
			
      // create thumb
      $thumb = new SpoonThumbnail($tempFilename, 75, 75);
      $thumb->setForceOriginalAspectRatio(false);
      $thumb->setAllowEnlargement(true);
      $success = array();
      $success[] = $thumb->parseToFile(PATH.'thumb/'.$name);					
    }			
  }
}

Om een thumbnail te genereren maken we gebruik van de spoon library, maar dit kan even goed met een andere PHP-library.

De progress bar

Door de javascript wat uit te breiden kunnen we snel een progress bar toevoegen aan het geheel.

beforeSend: function() {
  var percentVal = '0%';
  $('.progress').show();
  $('.bar').width(percentVal)
  $('.percent').html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
  var percentVal = percentComplete + '%';
  $('.bar').width(percentVal)
  $('.percent').html(percentVal);
}

Dit zal ervoor zorgen dat een progress bar zal opgevuld raken naarmate het upload proces zal eindigen. De HTML hiervoor is ook eenvoudig, deze bestaat uit een div-element met de klasse progress, en 2 child-elementen bar en percent.

Demo

Een werkende versie van bovenstaande code kan u hier vinden.