Spinner while files upload

[2inept]

I have a script which I’ve cobbled together with snippets from the internet which works well but…
I want to have a spinner or something while the files are uploaded because the page looks like nothing is happening while the files are uploaded.

I’ve looked around the internet but I can’t get my head around how to do this. The script will primarily be used on phones, I would ideally like the spinner to appear on top of the page if possible.

Thanks in advance

[php]

<?php header( 'Cache-Control: no-store, no-cache, must-revalidate' ); header( 'Cache-Control: post-check=0, pre-check=0', false ); header( 'Pragma: no-cache' ); ?> .folderButton { height: 151px; width: 151px; background:transparent url('tabletKiosk.png') no-repeat; background-repeat:no-repeat; text-shadow: -2px 2px #c4c0c0, 0 0px black, 0px 0 black, 0 0px black; padding-top:100px; } #wrap { width:100%; margin:0 auto; } #left_col { float:left; width:45%; padding-left: 2%; } #right_col { float:right; width:45%; padding-right: 2%; }

Select A Folder...

ChrisFolder

<div id="right_col">
	<form method="post" action="" enctype="multipart/form-data">
		<input type="hidden" name="APID" value="SudeshFolder">
		<button class="folderButton" onclick="document.getElementById('SudeshFolder').click(); return false;" />SudeshFolder</button>
		<input multiple="true" id="SudeshFolder" onchange="this.form.submit()" type="file" name="photos[]" style="visibility: hidden;"/>
		<input type="hidden" name="sendfiles" value="Send Files" />
	</form>
</div>

NicksFolder

<div id="right_col">
	<form method="post" action="" enctype="multipart/form-data">
		<input type="hidden" name="APID" value="LizFolder">
		<button class="folderButton" onclick="document.getElementById('LizFolder').click(); return false;" />LizFolder</button>
		<input multiple="true" id="LizFolder" onchange="this.form.submit()" type="file" name="photos[]" style="visibility: hidden;"/>
		<input type="hidden" name="sendfiles" value="Send Files" />
	</form>
</div>

<?php date_default_timezone_set('Europe/London'); $errors=0; if(isset($_POST['sendfiles'])) { $target_name =""; foreach($_POST as $name => $content) { // Most people refer to $key => $value if($name == "APID") { $target_name=$content; } } $target_dir = "upload/". $target_name . "/"; //echo $target_dir; $uploaddir = "files/"; //a directory inside $filesSent = 0; foreach ($_FILES['photos']['name'] as $name => $value) { $target_file = $target_dir . basename($_FILES['photos']['name'][$name]); $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); $filename = stripslashes($_FILES['photos']['name'][$name]); $extension = strtolower($imageFileType); //echo "\n This is the extension: ",$extension; if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) { //print error message ?>

       <h4>Unknown extension!</h4>
      <?php
         $errors=1;
     }
    else
    {
        $size=filesize($_FILES['photos']['tmp_name'][$name]);

//echo "\n Size: ",$size;

        $image_name=$filename.'.'.$extension;
    //$file_name=time()."_".rand(0,100000);
    $file_name=gmdate("Ymd_His",time())."_".rand(0,100000);
        $newname=$target_dir.$file_name.'.'.$extension;
        $copied = copy($_FILES['photos']['tmp_name'][$name], $newname);
        if (!$copied)
        {
            $errors=1;
        }
    else
    {
	$filesSent +=1;
    }

    }

}
//echo "<p></p>";
//echo "Files Sent " . $filesSent;
$_POST=Array();
header("Location: uploadFinished.php?filesSent=$filesSent");

//echo "Images uploaded successfully";

}

?>
[/php]

[astonecipher]

Since you are redirecting when the file has completed being uploaded, you just need the spinner added to an element?

Look up “loading gif”, there are a few that generate them for you to download and use.

[2inept]

I’ll have a go, thanks