文件上传的进度条

Alright. I found a simple php file for uploading files and does what I want it to do. It works, but after finding some jquery code on here and fiddling with it to work with my server side solution, I was disappointed to learn that it wouldn't show up in my progress bar.

Here's the PHP code.

<title>Upload Audition</title>
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check file size
if ($_FILES["fileToUpload"]["size"] > 209715200) {
    echo "<h1>Uh oh!</h1><p>Sorry, your audio file is too large! You can 
either <a href=upload.htm>go back</a> and try again or skip this option 
and <a href=JavaScript:window.close()>close this window</a>. </p>";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "mp3" && $imageFileType != "m4a" && $imageFileType != 
"flac" && $imageFileType != "wav" && $imageFileType != "ogg"  
&& $imageFileType != "aac" && $imageFileType != "wma" && $imageFileType != 
"aif"&& $imageFileType != "aiff" && $imageFileType != "au"   ) {
    echo "<h1>Uh oh!</h1><p>Sorry, we only accept '.aac', '.aif', '.aiff', 
'.au', '.flac', '.m4a', '.mp3', '.ogg', '.wav' and '.wma' files. ";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Therefore, your file was not uploaded. You can either <a 
href=upload.htm>go back</a> and try again or skip this option and <a 
href=JavaScript:window.close()>close this window</a>. </p>";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], 
$target_file)) 
        echo "<h1>Success!</h1><p>The file '". basename( 
$_FILES["fileToUpload"]["name"]). "' has been uploaded successfully! It's 
now safe to <a href=JavaScript:window.close()>exit this window</a>. </p>";
    } else {
        echo "<h1>Uh oh!</h1><p>Sorry, there was an error uploading your 
file. ";
    }
}
?>

Here's my HTML.

<form action="upload.php" id="fupload_form" method="post" 
enctype="multipart/form-data">
<h2>Upload Audition</h2>
<p>Select your audio file to upload. Keep in mind, it must be either an 
'.aac', '.aif', '.aiff', '.au', '.flac', '.m4a', '.mp3', '.ogg', '.wav' or 
'.wma' file, under 200 MB in size and should be no more than three hours 
in length.</p>
<input type="file" name="fileToUpload" id="fileToUpload" 
    onchange="uploadFile()" required="required" style="width: 400px">
<input type="submit" value="Upload" name="submit" 
    onclick="uploadFile()" style="width: 60px"><br />
<progress id="progressBar" value="0" max="100" style="width:460px;"> 
    </progress>
<div id="status"></div>
<div id="loaded_n_total"></div>        
</form>

Here's the jQuery.

<script type="text/javascript">
function _(el) {
  return document.getElementById(el);
}

function uploadFile() {
  var file = _("FileToUpload").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("FileToUpload", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "upload.php"); // 
http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... Please wait!";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload failed!";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload aborted!";
}
</script>

Knowing me, being visually impaired, it's probably something so stupid and I just missed it staring me in the face for the last two days. Help is appreciated

You if condition braces in your PHP are a little off.

Replace this:

// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], 
$target_file)) 
        echo "<h1>Success!</h1><p>The file '". basename( 
$_FILES["fileToUpload"]["name"]). "' has been uploaded successfully! It's 
now safe to <a href=JavaScript:window.close()>exit this window</a>. </p>";
    } else {
            echo "<h1>Uh oh!</h1><p>Sorry, there was an error uploading your 
file. ";
    }
}

With this:

// if everything is ok, try to upload file
} else {

    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file))
    {

        echo "<h1>Success!</h1><p>The file '". basename($_FILES["fileToUpload"]["name"]). "' has been uploaded successfully! It's now safe to <a href=JavaScript:window.close()>exit this window</a>. </p>";

    } else {

        echo "<h1>Uh oh!</h1><p>Sorry, there was an error uploading your file. ";

    }

}

Then post back here to let me know if that gets you any closer so we can rule this out or not.