文件上传进度条

时间:2018-07-10 17:35:57

标签: php jquery upload progress-bar

好的。我找到了一个用于上传文件的简单php文件,并做了我想要的事情。它可以工作,但是在这里找到一些jquery代码并尝试使其与我的服务器端解决方案一起使用后,我很失望地得知它不会出现在进度栏中。

这是PHP代码。

<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. ";
    }
}
?>

这是我的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>

这是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>

知道我有视觉障碍,这可能太愚蠢了,我只是错过了过去两天一直盯着我的脸。感谢帮助

1 个答案:

答案 0 :(得分:0)

如果您的PHP中的条件括号稍微有些偏离,您会发现。

替换此:

// 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. ";
    }
}

与此:

// 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. ";

    }

}

然后在这里发帖,让我知道您是否能更近一步,以便我们排除或排除该问题。