简单的jQuery进度条百分比 [英] Simple jQuery progress bar percentage
问题描述
我一直在尝试找到一个简单的教程，该教程显示了如何在文件上传中添加进度百分比的基础知识，我已经构建了文件上传部分，所以我不希望两者都附带一个插件，希望自己能够对进度条进行编码，但是我需要一些有关如何执行此操作的帮助.我想学习它的工作原理，我不只是想要一些插件来为我做这一切.
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.
推荐答案
查看此处:
http://jquery.malsup.com/form/progress.html
尝试一下:-
这是我的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>
我的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!";
}
?>
这篇关于简单的jQuery进度条百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
