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>

Answer 1

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.