caricare più immagini con jquery ajax ed elaborarle con php

Question

Non ho mai fatto qualcosa di simile prima e sto chiedendo come fare questo. Posso trovare come farlo con una semplice parte multiforme in html ecc. Ma ora come si fa con ajax?

pseudo codice:

html:

<input type="text" class="imgform" name="imagename" value="name" /> 
<input type="file" class="imgform_image" name="image" value="C:\Users\william\Pictures\image.png" /> 
<input type="button" id="btn" form="imgform" /> 

JQuery:

$('body').on('click', '#btn', function(){ 
    var form = $(this).attr("form"); 
    var string = $('.' + form).serialize(); 

    var image = $('.imgform_image').value("form"); 
    image = converttobase64(image); 

    $.post('action.php?action=uploadimg', string + {'image':image}, function (data){  
     datalader(data); 
    }); 
}); 

Nessun indizio su come fare questo. C'è anche un modo per farlo per più file img e controllare se il file è effettivamente un'immagine e, naturalmente, utilizzare il nome del file come nome dell'immagine invece di utilizzare un campo di testo di input.

Qualsiasi esempio di punta, collegamento o codice sarebbe utile grazie in anticipo!

Answer 1

Nota: ho completamente rivisto la mia risposta e l'ho resa migliore!

HTML

Prima facciamo una forma tradizionale senza un pulsante di conferma. Invece facciamo un bottone.

<form enctype="multipart/form-data" id="myform">  
    <input type="text" name="some_usual_form_data" /> 
    <br> 
    <input type="file" accept="image/*" multiple name="img[]" id="image" /> <sub>note that you have to use [] behind the name or php wil only see one image</sub> 
    <br> 
    <input type="button" value="Upload images" class="upload" /> 
</form> 
<progress value="0" max="100"></progress> 
<hr> 
<div id="content_here_please"></div> 

lato Javascript/upload jquery

che qui è il Javascript .. o sì e jQuery per caricare le immagini e gli altri dati del modulo:

$(document).ready(function() { 
     $('body').on('click', '.upload', function(){ 
      // Get the form data. This serializes the entire form. pritty easy huh! 
      var form = new FormData($('#myform')[0]); 

      // Make the ajax call 
      $.ajax({ 
       url: 'action.php', 
       type: 'POST', 
       xhr: function() { 
        var myXhr = $.ajaxSettings.xhr(); 
        if(myXhr.upload){ 
         myXhr.upload.addEventListener('progress',progress, false); 
        } 
        return myXhr; 
       }, 
       //add beforesend handler to validate or something 
       //beforeSend: functionname, 
       success: function (res) { 
        $('#content_here_please').html(res); 
       }, 
       //add error handler for when a error occurs if you want! 
       //error: errorfunction, 
       data: form, 
       // this is the important stuf you need to overide the usual post behavior 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 
     }); 
    }); 

    // Yes outside of the .ready space becouse this is a function not an event listner! 
    function progress(e){ 
     if(e.lengthComputable){ 
      //this makes a nice fancy progress bar 
      $('progress').attr({value:e.loaded,max:e.total}); 
     } 
    } 

lato di lavorazione PHP

E per coloro che hanno bisogno del lato php di fare qualcosa con quelli immagini Ecco il codice php per eseguire un ciclo attraverso:

<?php 

    $succeed = 0; 
    $error = 0; 
    $thegoodstuf = ''; 
    foreach($_FILES["img"]["error"] as $key => $value) { 
     if ($value == UPLOAD_ERR_OK){ 
      $succeed++; 

      // get the image original name 
      $name = $_FILES["img"]["name"][$key]; 

      // get some specs of the images 
      $arr_image_details = getimagesize($_FILES["img"]["tmp_name"][$key]); 
      $width = $arr_image_details[0]; 
      $height = $arr_image_details[1]; 
      $mime = $arr_image_details['mime']; 

      // Replace the images to a new nice location. Note the use of copy() instead of move_uploaded_file(). I did this becouse the copy function will replace with the good file rights and move_uploaded_file will not shame on you move_uploaded_file. 
      copy($_FILES['img']['tmp_name'][$key], './upload/'.$name); 

      // make some nice html to send back 
      $thegoodstuf .= " 
           <br> 
           <hr> 
           <br> 

           <h2>Image $succeed - $name</h2> 
           <br> 
           specs, 
           <br> 
           width: $width <br> 
           height: $height <br> 
           mime type: $mime <br> 
           <br> 
           <br> 
           <img src='./upload/$name' title='$name' /> 
      "; 
     } 
     else{ 
      $error++; 
     } 
    } 

    echo 'Good lord vader '.$succeed.' images where uploaded with success!<br>'; 

    if($error){ 
     echo 'shameful display! '.$error.' images where not properly uploaded!<br>'; 
    } 

    echo 'O jeah there was a field containing some usual form data: '. $_REQUEST['some_usual_form_data']; 

    echo $thegoodstuf; 

?> 

demo dal vivo al my dev web server which is not always online!

Se si desidera comprimere e ridimensionare

Avete bisogno di questa classe:

class SimpleImage{ 

     var $image; 
     var $image_type; 

     function load($filename){ 
      $image_info = getimagesize($filename); 
      $this->image_type = $image_info[2]; 

      if($this->image_type == IMAGETYPE_JPEG) 
      { 
       $this->image = imagecreatefromjpeg($filename); 
      } 
      elseif($this->image_type == IMAGETYPE_GIF) 
      { 
       $this->image = imagecreatefromgif($filename); 
      } 
      elseif($this->image_type == IMAGETYPE_PNG) 
      { 
       $this->image = imagecreatefrompng($filename); 
      } 
     } 

     function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=0777){ 

      if($image_type == IMAGETYPE_JPEG) 
      { 
       $gelukt = imagejpeg($this->image,$filename,$compression); 
      } 
      elseif($image_type == IMAGETYPE_GIF) 
      { 
       $gelukt = imagegif($this->image,$filename); 
      } 
      elseif($image_type == IMAGETYPE_PNG) 
      { 
       $gelukt = imagepng($this->image,$filename); 
      } 

      if($permissions != false) 
      { 
       chmod($filename,$permissions); 
      } 

      return $gelukt; 
     } 

     function output($image_type=IMAGETYPE_JPEG) { 

      if($image_type == IMAGETYPE_JPEG) 
      { 
       imagejpeg($this->image); 
      } 
      elseif($image_type == IMAGETYPE_GIF) 
      { 
       imagegif($this->image); 
      } 
      elseif($image_type == IMAGETYPE_PNG) 
      { 
       imagepng($this->image); 
      } 
     } 

     function getWidth(){ 

      return imagesx($this->image); 

     } 

     function getHeight(){ 

      return imagesy($this->image); 

     } 

     function maxSize($width = 1920, $height = 1080){ 
      if(($this->getHeight() > $height) && ($this->getWidth() > $width)){ 
       $ratio = $height/$this->getHeight(); 
       $newwidth = $this->getWidth() * $ratio; 

       if($newwidth > $width){ 
        $ratio = $width/$newwidth; 
        $height = $height * $ratio; 
        $newwidth = $width; 
       } 

       $this->resize($newwidth,$height); 
       return true; 
      } 
      elseif($this->getHeight() > $height){ 
       $ratio = $height/$this->getHeight(); 
       $width = $this->getWidth() * $ratio; 

       $this->resize($width,$height); 
       return true; 
      } 
      elseif($this->getWidth() > $width){ 
       $ratio = $width/$this->getWidth(); 
       $height = $this->getheight() * $ratio; 

       $this->resize($width,$height); 
       return true; 
      } 
      return false; 
     } 

     function resizeToHeight($height){ 
      $ratio = $height/$this->getHeight(); 
      $width = $this->getWidth() * $ratio; 
      $this->resize($width,$height); 
     } 

     function resizeToWidth($width){ 
      $ratio = $width/$this->getWidth(); 
      $height = $this->getheight() * $ratio; 
      $this->resize($width,$height); 
     } 

     function scale($scale){ 
      $width = $this->getWidth() * $scale/100; 
      $height = $this->getheight() * $scale/100; 
      $this->resize($width,$height); 
     } 

     function resize($width,$height) { 

      $new_image = imagecreatetruecolor($width, $height); 
      if($this->image_type == IMAGETYPE_GIF || $this->image_type == IMAGETYPE_PNG) 
      { 
       $current_transparent = imagecolortransparent($this->image); 

       if($current_transparent != -1) { 
        $transparent_color = imagecolorsforindex($this->image, $current_transparent); 
        $current_transparent = imagecolorallocate($new_image, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']); 
        imagefill($new_image, 0, 0, $current_transparent); 
        imagecolortransparent($new_image, $current_transparent); 
       } 
       elseif($this->image_type == IMAGETYPE_PNG) 
       { 
        imagealphablending($new_image, false); 
        $color = imagecolorallocatealpha($new_image, 0, 0, 0, 127); 
        imagefill($new_image, 0, 0, $color); 
        imagesavealpha($new_image, true); 


      } 
     } 

     imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight()); 
     $this->image = $new_image; 
    } 
} 

puoi utilizzarlo in questo modo:

$succeed = 0; 
$error = 0; 
$thegoodstuf = ''; 
foreach($_FILES["img"]["error"] as $key => $value) { 
    if ($value == UPLOAD_ERR_OK){ 
     $succeed++; 

     $name = $_FILES["img"]["name"][$key]; 

     $image = new SimpleImage(); 
     $image->load($_FILES['img']['tmp_name'][$key]); 
     $chek = $image->maxSize(); 

     if($chek){ 
      $move = $image->save('./upload/'.$name); 
      $message= 'Afbeelding verkleind naar beter formaat!<br>'; 
     } 
     else{ 
      $move = copy($_FILES['img']['tmp_name'][$key], './upload/'.$name); 
      #$move = move_uploaded_file($_FILES['img']['tmp_name'][$key], './upload/'.$name); 
      $message= ''; 
     } 

     if($move){ 

      $arr_image_details = getimagesize('./upload/'.$name); 
      $width = $arr_image_details[0]; 
      $height = $arr_image_details[1]; 
      $mime = $arr_image_details['mime']; 

      $thegoodstuf .= " 
          <br> 
          <hr> 
          <br> 

          <h2>Image $succeed - $name</h2> 
          <br> 
          specs, 
          <br> 
          $message 
          width: $width <br> 
          height: $height <br> 
          mime type: $mime <br> 
          <br> 
          <br> 
          <img src='./upload/$name' title='$name' /> 
      "; 
     } 
     else{ 
      $error++; 
     } 
    } 
    else{ 
     $error++; 
    } 
} 

echo 'Good lord vader '.$succeed.' images where uploaded with success!<br>'; 

if($error){ 
    echo 'shameful display! '.$error.' images where not properly uploaded!<br>'; 
} 

echo 'O jeah there was a field containing some usual form data: '. $_REQUEST['some_usual_form_data']; 

echo $thegoodstuf; 

Answer 2

Ho una versione aggiornata con resizer:

$succeed = 0; 
$error = 0; 
$thegoodstuf = ''; 
foreach($_FILES["file"]["error"] as $key => $value) { 
    if ($value == UPLOAD_ERR_OK){ 
     $succeed++; 

    // get the image original name 
    $name = $_FILES["file"]["name"][$key]; 
    $ext = pathinfo($name, PATHINFO_EXTENSION); 
    $img_name=md5($name.rand(00000,99999)).".".$ext;//rename filename 


    if($ext=="jpg" || $ext=="jpeg"){ 
     $uploadedfile = $_FILES['file']['tmp_name'][$key]; 
     $src = imagecreatefromjpeg($uploadedfile); 
    }else if($ext=="png"){ 
     $uploadedfile = $_FILES['file']['tmp_name'][$key]; 
     $src = imagecreatefrompng($uploadedfile); 
    }else { 
     $src = imagecreatefromgif($uploadedfile); 
    } 

    list($width,$height)=getimagesize($uploadedfile); 

    $new_width=800; 
    $new_height=($height/$width)*$new_width; 
    $tmp=imagecreatetruecolor($new_width,$new_height); 

    $new_width1=140; 
    $new_height1=($height/$width)*$new_width1; 
    $tmp1=imagecreatetruecolor($new_width1,$new_height1); 

    imagecopyresampled($tmp,$src,0,0,0,0,$new_width,$new_height, 
    $width,$height); 

    imagecopyresampled($tmp1,$src,0,0,0,0,$new_width1,$new_height1, 
    $width,$height); 

    $filename = "../../photos/".$img_name; 
    $filename1 = "../../photos/tn/".$img_name; 

    imagejpeg($tmp,$filename,100); 
    imagejpeg($tmp1,$filename1,100); 

    imagedestroy($src); 
    imagedestroy($tmp); 
    imagedestroy($tmp1); 

//insert to DB here 



    // make some nice html to send back 
    $thegoodstuf .= " 
         <br> 
         <hr> 
         <div class='thumbnail'> 
         <b class='alert alert-info'>Image $succeed - $img_name</b> 
         <br> 
         width: $new_width <br> 
         height: $new_height <br> 
         mime type: $mime <br> 
         <br> 
         <br> 
         <img src='../../photos/$img_name' title='$img_name' class='thumbnail'/> 
         </div> 
    "; 
} 
else{ 
    $error++; 
} 

} 
echo $thegoodstuf; 
echo $succeed.' images where uploaded with success!<br>'; 

if($error){ 
    echo $error.' images where not properly uploaded!<br>'; 
}