jquery ajax ile birden çok görüntü yükleyin ve bunları php ile işleyin

Question

Daha önce hiç böyle bir şey yapmadım ve bunu nasıl yapacağımı soruyorum. Bunu, düz html çok parçalı parçalarla nasıl yapacağımı bulabilirim. Ama şimdi ajax ile nasıl yapılacağı.

sözde kod:

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

bu nasıl yapılacağına ilişkin bir ipucu yok. Ayrıca, dosyanın bir görüntü olduğu ve dosya adını bir giriş metin alanı kullanmak yerine resim adı olarak kullandığı çoklu img dosyaları ve chek için bunu yapmanın bir yolu da vardır.

Herhangi bir ipucu, bağlantı veya kod örneği yararlı olabilir, şimdiden teşekkür ederiz!

Answer 1

Not: Cevabımı tamamen gözden geçirdim ve daha iyi hale getirdim!

HTML

Önce bir onaylama düğmesi olmayan geleneksel bir formu olun. Bunun yerine bir düğme yaparız.

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

JavaScript/jQuery yükleme tarafı burada daha

ve evet o .. görüntüleri ve diğer form verilerini yüklemek için jQuery JavaScript geçerli:

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

PHP işleme tarafı

Ve bununla bir şeyler yapmak için php tarafına ihtiyaç duyanlar için

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

:

Bu sınıf gerekir my dev web server which is not always online!

sıkıştırmak ve yeniden boyutlandırmak isterseniz de

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

?> 

canlı demo: burada görüntü döngü teknesine php kodudur Bunu şu şekilde kullanabilirsiniz:

$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

Ben resizer güncelleştirilmiş versiyonu var:

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