upload multiple images with jquery ajax and process them with php - php

Question

I have never done something like this before and I am asking how to do this. I can find how to do this with plain html multiform part etc. But now how to do this with ajax?
Pseudo code:
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);
});
});
No clue on how to do this. Also is there a way to do this for multiple img files and chek if the the file actually is a image and of course use the filename as the image name instead of using a input textfield.
Any tip, link or code example would be useful thank you in advance!

Answer 1

Note: I totally reviewed my answer and made it better!
HTML
First we make a traditional form without a confirm button. Instead we make a button.
<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 upload side
than here is the Javascript.. o yes and Jquery to upload the images and the other form data:
$(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 processing side
And for those who need the php side to do something with those images here is the php code to loop trough:
<?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 at my dev web server which is not always online!
If you want to compress and resize
You need this class:
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;
}
}
you can use it like this:
$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

I've got an updated version with 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>';
}