![](/img/trans.png)
[英]How can I grab a value from a PHP generated div and use Javascript to then change the width of a progress bar HTML5 element?
[英]How do I create a progress bar in html5, javascript or php?
我已經有了這段代碼,但是我想要的是圖形欄,而不是數字上傳過程……我在這里也注意到了一個問題……progressNumber僅在我單擊提交時顯示,即使沒有選擇文件也是如此。如果選擇文件,則不會顯示progressNumber。
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
// document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "thankyou.php");
xhr.send(fd);
return false;
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + ' % uploading file';
document.getElementById('progress').style.width = percentComplete + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
// alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
// alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
以及html表單和輸入標簽
<form id="form1" name = "myform" onsubmit = "return uploadFile()" enctype="multipart/form-data" action = "thankyou.php" method="post" id = "form1" >
<div class="row">
<label for="fileToUpload">Upload File</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" class = "dropzone" required/>
</div>
<p>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div id="progressNumber"></div>
<div id="progress-bg" style="width:200px;height:10px;background:#FFF">
<div id="progress" style="height:10px;background:#000"></div>
</div>
<input type="submit" name="uploadFiles" value="Submit">
HTML5中有一個特殊標記:
<progress value="0.25" id="progressNumber">25%</progress>
“ 25%”將僅在不支持進度標簽的瀏覽器中顯示。 您還可以使用其他語法:
<progress value="25" max="100">25 out of 100</progress>
在這種情況下,您可以使用第一種語法並更改行
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + ' % uploading file';
到線
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + ' % uploading file';
document.getElementById('progressNumber').value = evt.loaded/evt.total;
創建具有固定寬度的進度條背景或容器,並將進度條div放入其中:
<div id="progress-bg" style="width:200px;height:10px;background:#FFF">
<div id="progress" style="height:10px;background:#000"></div>
</div>
對於進度事件,只需將進度條的寬度設置為已完成的百分比即可。
document.getElementById('progress').style.width = percentComplete + '%';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.