使用jquery ajax上传多个图像并使用php处理它们

我之前从未做过这样的事情，而且我在问这个怎么做。 我可以找到如何用普通的html multiform部分等来做这个。但是现在如何用ajax做到这一点？

伪代码：

HTML：

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文件执行此操作，如果文件实际上是图像，则可以使用文件名作为图像名称，而不是使用输入文本字段。

任何提示，链接或代码示例都会有用，请提前感谢！

Answer 1

注意：我完全回顾了我的答案并使其变得更好！

HTML

首先，我们制作一个没有确认按钮的传统表格。 相反，我们制作一个按钮。

 
  
  note that you have to use [] behind the name or php wil only see one image 
  
  
 
 

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代码：

  $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 .= " 
 
 
 
Image $succeed - $name
 
 specs, 
 width: $width 
 height: $height 
 mime type: $mime 
 
 
  "; } else{ $error++; } } echo 'Good lord vader '.$succeed.' images where uploaded with success!
'; if($error){ echo 'shameful display! '.$error.' images where not properly uploaded!
'; } echo 'O jeah there was a field containing some usual form data: '. $_REQUEST['some_usual_form_data']; echo $thegoodstuf; ?> 

我的开发网络服务器上的现场演示并不总是在线！

如果要压缩和resize

你需要这个课程：

 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!
'; } 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 .= " 
 
 
 
Image $succeed - $name
 
 specs, 
 $message width: $width 
 height: $height 
 mime type: $mime 
 
 
  "; } else{ $error++; } } else{ $error++; } } echo 'Good lord vader '.$succeed.' images where uploaded with success!
'; if($error){ echo 'shameful display! '.$error.' images where not properly uploaded!
'; } 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 .= " 
 
 
 Image $succeed - $img_name 
 width: $new_width 
 height: $new_height 
 mime type: $mime 
 
 
  
 "; } else{ $error++; } } echo $thegoodstuf; echo $succeed.' images where uploaded with success!
'; if($error){ echo $error.' images where not properly uploaded!
'; }