Загружать несколько изображений с помощью jquery ajax и обрабатывать их с помощью php

Я никогда раньше не делал ничего подобного, и я спрашиваю, как это сделать. Я могу найти, как это сделать с помощью простой многоформатной части html и т.д. Но теперь, как это сделать с помощью ajax?

Псевдокод:

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

Не знаю, как это сделать. Также есть способ сделать это для нескольких файлов img и chek, если файл на самом деле является образом и, конечно, использует имя файла как имя изображения вместо использования текстового поля ввода.

Любой отзыв, ссылка или пример кода будут полезны вам заранее!

Ответ 1

Примечание. Я полностью просмотрел свой ответ и сделал его лучше!

HTML

Сначала мы делаем традиционную форму без кнопки подтверждения. Вместо этого мы делаем кнопку.

<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

чем здесь Javascript.. o да и 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

И для тех, кому нужна сторона php, чтобы что-то делать с этими изображениями, здесь находится PHP-код для циклического прохода:

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

?>

live demo на моем веб-сервере dev, который не всегда в сети!

Если вы хотите сжать и изменить размер

Вам нужен этот класс:

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

вы можете использовать его следующим образом:

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

Ответ 2

У меня есть обновленная версия с 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>';
}