jquery AJAX के साथ कई छवियां अपलोड करें और उन्हें php

Question

से संसाधित करें मैंने पहले ऐसा कुछ नहीं किया है और मैं यह पूछ रहा हूं कि यह कैसे करें। मैं सादे एचटीएमएल मल्टीफार्म भाग आदि के साथ ऐसा कैसे कर सकता हूं, लेकिन अब AJAX के साथ ऐसा कैसे करें?

छद्म कोड:

एचटीएमएल:

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

ऐसा करने के तरीके पर कोई सुराग। फ़ाइल को वास्तव में एक छवि है और निश्चित रूप से फ़ाइल नाम का उपयोग इनपुट टेक्स्टफील्ड का उपयोग करने के बजाय फ़ाइल नाम के रूप में फ़ाइल नाम का उपयोग करने के लिए कई आईएमजी फाइलों और चेक के लिए ऐसा करने का एक तरीका है।

कोई भी युक्ति, लिंक या कोड उदाहरण उपयोगी होगा अग्रिम में धन्यवाद!

Answer 1

नोट: मैंने पूरी तरह से मेरे उत्तर की समीक्षा की और इसे बेहतर बना दिया!

एचटीएमएल

पहले हम एक पुष्टि बटन के बिना एक पारंपरिक विधि बना दें। इसके बजाए हम एक बटन बनाते हैं।

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

जावास्क्रिप्ट/jQuery अपलोड ओर

यहाँ से

जावास्क्रिप्ट चित्र और अन्य प्रपत्र डेटा अपलोड करने के लिए Jquery है .. ओ हाँ और:

$(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 पक्ष की आवश्यकता है उन लोगों के साथ कुछ करने के लिए

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

:

आप इस वर्ग की जरूरत

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

?> 

my dev web server which is not always online!

आप सेक और आकार बदलने के लिए चाहते हैं पर लाइव डेमो: यहां छवियों पाश गर्त के लिए php कोड है आप इसे इस तरह उपयोग कर सकते हैं:

$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

मैं रीसाइज़र साथ एक अद्यतन संस्करण है:

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