使用jQuery Ajax上传多张图片并使用PHP处理

Question

我從未做過這樣的事情，我想知道如何做。我可以使用普通 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);
    });
});

我不知道如何做这件事。是否有一种方法可以对多个图像文件进行此操作，并检查文件实际上是否是图像，当然使用文件名作为图像名称而不是使用输入文本字段。

任何提示、链接或代码示例都会很有用，谢谢！

- botenvouwer

---

这个SO问题可能会有帮助。https://dev59.com/d2025IYBdhLWcg3wNTAV - Ken

尝试使用 string + '&' + $.param({'image':image})。 - Musa

Answer 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和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;

?>

在我的开发Web服务器上有一个演示 （点击此处），但它并不总是在线！

如果您想要压缩和调整大小

您需要这个类：

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;

- botenvouwer

---

这段代码不是来自net.tusplus.com吗？http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/ - localhost

是的，顺便说一下，如果你正在寻找如何使用ajax上传多张图片，我已经改进了我的代码，如果你有兴趣，我会重新发布新代码。 - botenvouwer

好的，那么这就是我制作的一个新示例，比之前的好了10倍。 - botenvouwer

可以实现，不过我建议在服务器端上传后进行调整大小。请参见我更新答案中的“如果您想压缩和调整大小”。 - botenvouwer

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

- Wilf

---

哦，很好，谢谢你提供这个调整大小的工具。我刚刚也在研究这个。如果我完成了，我会添加自己的示例！ - botenvouwer