php 简单的 jQuery 进度条百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12131999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple jQuery progress bar percentage
提问by Dylan Cross
I have been trying to find a simple tutorial that shows the basics of how to add a progress percentage to my file upload, I have already built my file upload part so I don't want a plugin that comes with both, I want to be able to code the progress bar myself, but I need some help on how to do this. I want to learn how it works, I don't just want some plugin that does it all for me.
我一直在试图找到一个简单的教程，它展示了如何向我的文件上传添加进度百分比的基础知识，我已经构建了我的文件上传部分，所以我不想要一个两者都附带的插件，我想成为能够自己编写进度条，但我需要一些关于如何执行此操作的帮助。我想了解它是如何工作的，我不只是想要一些为我做这一切的插件。
Any help would be greatly appreciated, thanks!
任何帮助将不胜感激，谢谢！
I'm just interested in how to get the percentage of the file upload, not really on the progress bar itself. I want to be able to have an accurate percentage.
我只是对如何获得文件上传的百分比感兴趣，而不是真正在进度条上。我希望能够有一个准确的百分比。
回答by Abid Hussain
Look here:
看这里：
http://jquery.malsup.com/form/progress.html
http://jquery.malsup.com/form/progress.html
Try this:-
尝试这个：-
this is my html code
这是我的 html 代码
<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code><input type="file" name="myfile"></code>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedfile"><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
});
})();
</script>
</body>
</html>
my php code
我的 php 代码
<?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>
回答by Ilia Rostovtsev
Please take a look, I think you will find this one helpful. It's jQuery and it has progress percentage, just like you wanted for your upload script!
请看一看，我想你会发现这个很有帮助。它是 jQuery，它具有进度百分比，就像您想要的上传脚本一样！
If you want to learn more complicated example, there is reliable script I would recommend,
called Uber Uploader- it's jQuery and PHP.
如果你想学习更复杂的例子，我会推荐一个可靠的脚本，
叫做Uber Uploader- 它是 jQuery 和 PHP。
