PHP & JQUERY + how to let Jquery know when a file upload has completed

Question

I have a script working to upload images without refreshing the page using jquery.form.js

Below is the PHP file that it kicks off the processes the file and when finished PHP creates an tag to show the image.

I now need a method to let JQUERY know the PHP file processing has completed. Is there a good way to connect these two?

I thought I could write something hidden to the page and have JQUERY look for this but I'm not sure if this is a B-Grade solution.

Any ideas? I can explain better if needed. thx

<?php

    $type = $_POST['mimetype']; 
  $xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'; 


    foreach($_FILES as $file) { 
            $filename = $file['name']; 
            $filesize = $file['size'];
            $filetmp = $file['tmp_name'];
    } 


    // Script Variables
    $errors=0;
    $notAllowedFileType=0;
    $exceededMaxFileSize=0;
    $maxsize='10485760';                                    // 10MB Maximum Upload
    $folder = 'images/';
    $configWidth = 500;
    $newFileName = 'success_story'.time().'.jpg';

    // Process if No Errors
    if(!$errors) {

        // Variables
        $uploadedFile = $filetmp;
        $filename = basename( $filename);
        $extension = strtolower(getExtension($filename));

        // Convert the Specific Type of File into an Image
        if($extension=='jpg' || $extension=='jpeg' ) {
            $uploadedfile = $fullfilepath;
            $src = imagecreatefromjpeg($uploadedFile);
        }elseif($extension=='png') {
            $uploadedfile = $fullfilepath;
            $src = imagecreatefrompng($uploadedFile);
        }else{
            $uploadedfile = $fullfilepath;
            $src = imagecreatefromgif($uploadedFile);
        }

        // Configure Width & Height
        list($origWidth, $origHeight) = getimagesize($uploadedFile);
        $configHeight = ($origHeight/$origWidth)* $configWidth;

        // Create Empty File
        $tmp = imagecreatetruecolor($configWidth, $configHeight);
        imagecopyresampled($tmp, $src, 0,0,0,0,$configWidth,$configHeight,$origWidth,$origHeight);
        imagejpeg($tmp, $_SERVER['DOCUMENT_ROOT'].$folder.$newFileName,90);

        echo "<img src=".$folder.$newFileName." id=\"cropMeNowImage\">";
    }

    // Get Extension from Uploaded File
    function getExtension($str) {
        $i = strrpos($str,".");
        if (!$i) {return "";}
        $l = strlen($str) - $i;
        $ext = substr($str,$i+1,$l);
        return $ext;
    }
?>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script>
(function() {

    $(document).on('change','img#cropMeNowImage', function() {
        alert('Ready to Crop');
    });

})();       
</script>

It looks like .load() event on your image would work. api.jquery.com/load-event — Todd Moses
– Todd Moses, Commented Sep 8, 2012 at 3:57

Igor Parra · Accepted Answer · 2012-09-08 04:07:53Z

2

You need to use a callback function. Something like:

$(document).on('change','img#cropMeNowImage', function() {
    $.post(url, {
        vars_to_server : vars
    }, function(process_done){
        if (process_done)
            alert("ready");

    })
});

php must echo something recognizable by jquery in the var process_done

Instead:

echo "<img src=".$folder.$newFileName." id=\"cropMeNowImage\">";

you can echo 1 for success

This is the idea. It's totally possible. Specially for the common task of upload files via AJAX...

I recommend you: 5 Ways to Make Ajax Calls with jQuery

Take a look to http://github.com/valums/file-uploader I always use it to upload files.

edited Sep 8, 2012 at 4:07

answered Sep 8, 2012 at 4:02

Igor Parra

10.4k10 gold badges74 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PHP & JQUERY + how to let Jquery know when a file upload has completed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related