Resize Image before upload to php

248 Views Asked by At

Having problems with my work. I am uploading an image to a php web server. This works really great on localhost, but when I upload the site to the web, upload time spikes up dramatically. It even takes up to 3 minutes to upload a simple 2.5mb Photo and this is really bad for business. How do I handle this problem? Here is my Javascript code:

function uploadImage(obj){
    var formData = new FormData();
    formData.append("imageuploader", obj.files[0]);
    
    $.ajax({
        url: "backend/ajaxupload.php",
        type : "POST",
        data : formData,
        contentType: false,
        cache: false,
        processData: false,
        
        beforeSend: function (){
            $("#empty-div").html("<img src = 'icons/loader.gif' style = 'max-width: 60px;'/>");
        },
        uploadProgress: function(event, position, total, percentComplete){  
            // console.log(percentComplete);
            $("#empty-div").html('<div id="progress-status"><h3>' + percentComplete +' % UPLOADED</h3></div>');
        },
        success: function(data){
            if(data.indexOf("ERROR")>=0){
                alert(data);
            }else{
                
                imageUrl = data;
                $("#url_"+imageTag+"").val(data);
                $("#empty-div").html('<div class="product-image-view" id="image-view-'+idTag+'"><img src = "backend/'+imageUrl+'" style = "max-width: 100%;" /></div>');
                setImageFieldTag(1);
            }
        },
        error: function(data){
            alert(data);
        }
    });
    setIdTag(1);
}

HERE IS MY PHP CODE: it's the ajaxupload.php remotely accessed through js.

$directory_name = "../backend/product_images/";


$file = $_FILES['imageuploader']['tmp_name'];
$source_properties = getimagesize($file);
$fileNewName = time();
$folderPath = $directory_name;

$ext = pathinfo($_FILES['imageuploader']['name'], PATHINFO_EXTENSION);
$imageType = $source_properties[2];

switch($imageType){
  case IMAGETYPE_PNG:
    $imageResourceId = imagecreatefrompng($file);
    $targetLayer = imageResize($imageResourceId, $source_properties[0], $source_properties[1]);
    imagepng($targetLayer, $folderPath.$fileNewName."_thump.".$ext);
    echo "product_images/"."_thump.".$ext;
    break;
  case IMAGETYPE_GIF:
    $imageResourceId = imagecreatefromgif($file);
    imagepng($targetLayer, $folderPath.$fileNewName."_thump.".$ext); 
    echo "product_images/"."_thump.".$ext;
    break;
  case IMAGETYPE_JPEG:
    $imageResourceId = imagecreatefromjpeg($file);
    $targetLayer = imageResize($imageResourceId, $source_properties[0], $source_properties[1]);
    $image = imagejpeg($targetLayer, $folderPath.$fileNewName."_thump.".$ext);
    echo "product_images/".$fileNewName."_thump.".$ext;
    break;
  default:
    echo "Invalid image type.";
    exit;
    break;
}

function imageResize($imageResourceId, $width, $height){

    $targetWidth = 800;
    $targetHeight = 800;

    $targetLayer = imagecreatetruecolor($targetWidth, $targetHeight);
    imagecopyresampled($targetLayer, $imageResourceId, 0, 0, 0, 0, $targetWidth, $targetHeight, $width, $height);
  return $targetLayer;
}
0

There are 0 best solutions below