Html5 Resize Multi Upload Images Before send them to server

Question

I'm using HTML5 multi upload images. My code is exactly like this

Html

<input type="file" name="files[]" multiple="multiple" accept="image/*">

PHP

<?php
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
    // Loop $_FILES to execute all files
    foreach ($_FILES['files']['name'] as $f => $name) {  
            $extt = pathinfo($name, PATHINFO_EXTENSION);
            $newname1 = rand(11111,99999);
            $time22 = time();           
        if ($_FILES['files']['error'][$f] == 4) {
            continue; // Skip file if any error found
        }          
        if ($_FILES['files']['error'][$f] == 0) {              
            if ($_FILES['files']['size'][$f] > $max_file_size) {
                $message[] = "$name is too large!.";
                continue; // Skip large files
            }
            elseif( ! in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats) ){
                $message[] = "$name is not a valid format";
                continue; // Skip invalid file formats
            }
            else{ // No error found! Move uploaded files 
            $apt->query("INSERT INTO attachments VALUES ('', '$img', 'modules/news/attachments/$time22$newname1.$extt','0' ,'$name');");

                if(move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$time22.$newname1.".".$extt)) {
                    $count++; // Number of successfully uploaded files
                }
            }
        }
    }
}
?>

What I need to do is resizing images before upload (Client Side). If there is an easy example that works with my code, will be appreciated. I'm really new at HTML5 ;(