PHP上传,提取和进度条

我需要帮助为我的php上传网站创build一个进度条。 我有上传和exctract部分sorting,但我需要进度条的帮助。 我不知道该怎么做。 另外,是否有上传的最大文件大小?

HTML

<?php if($message) echo "<p>$message</p>"; ?> <form enctype="multipart/form-data" method="post" action=""> <label>Choose file (.zip): <input type="file" name="zip_file" /></label> <br /> <input type="submit" value="Upload" name="submit" value="Upload" /> </form> 

PHP

 <?php if($_FILES["zip_file"]["name"]) { $filename = $_FILES["zip_file"]["name"]; $source = $_FILES["zip_file"]["tmp_name"]; $type = $_FILES["zip_file"]["type"]; $name = explode(".", $filename); $accepted_types = array( 'application/zip', 'application/x-zip-compressed', 'multipart/x-zip', 'application/x-compressed'); foreach($accepted_types as $mime_type) { if($mime_type == $type) { $okay = true; break; } } $continue = strtolower($name[1]) == 'zip' ? true : false; if(!$continue) { $message = "[...] not a .zip file. Please try again."; } $target_path = "./".$filename; if(move_uploaded_file($source, $target_path)) { $zip = new ZipArchive(); $x = $zip->open($target_path); if ($x === true) { $zip->extractTo("./"); $zip->close(); unlink($target_path); } $message = "Your .zip file was uploaded and unpacked."; } else { $message = "There was a problem with the upload. Please try again."; } } ?> 

您可以进行一些更改以适应,但如果您需要进度条,则此方法效果相当好。 你可以添加更多的eventlisteners,并使其如何你想要的。 我希望这是你的一个很好的起点。

 function uploadFile(){ var file = document.getElementById("zip_file").files[0]; var formdata = new FormData(); formdata.append("zip_file", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", function(event) { runprogress(event); } , false); ajax.addEventListener("load", function(event) {uploadcomplete(event); }, false); //Target your php file. ajax.open("POST", "upload.php"); ajax.send(formdata); } function runprogress(event){ //The progress %, you might want to Math.round(percent) var percent = (event.loaded / event.total) * 100; } function uploadcomplete(event){ //This will = to your php reply. var AjaxReply=event.target.responseText; } 

据我所知,你将不得不使用JavaScript来做到这一点。 通过AJAX调用发布数据并初始化进度条。 随着时间的推移animation,使酒吧“填补”。

最终,AJAX调用将完成,并将发回一个响应,完成调用后,您可以完成animation。 这是我假设大多数进度条工作的方式,因为他们通常会上升到99%左右,直到post返回“完成状态”为止。

在任何情况下,你都会有一个进度条,用<div>来表示,例如宽度会随着时间的推移而增加,或者一个数字会上升等等,而你会用JavaScript和/或jQuery。 希望这会让你开始正确的方向。

编辑

这里有一个教程的链接,描述使用AJAX 将file upload到服务器所需的步骤:使用AJAX 上传文件