html上傳進度條
A. html 怎麼做出這種進度條一樣的 或者讓range實時顯示值也可以啊
獲取range的值就行了，然後將其顯示出來，你實時改變range的值，顯示的就會實時改變
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<inputid="range"type="range"min="0"max="50000"value="5"step="10"oninput="change()"onchange="change()">
<spanid="value">0</span>
<scripttype='text/javascript'>
functionchange(){
varvalue=document.getElementById('range').value;
document.getElementById('value').innerHTML=value;
}
</script>
</body>
</html>
B. 前端上傳文件實時顯示進度條和上傳速度的工作原理是怎樣的
後端的責任。
C. JSP 上傳文件進度條怎麼做
HTTP本身無法實現上傳
進度條
，因為無法使用JS訪問文件系統，並對
文件流
進行分塊。
可以考慮2種方式實現上傳進度條：
1.flash：flash可以訪問文件系統，並以二進制方式上傳文件，這可以將文件進行分塊;
2.使用
ActiveX控制項
：這個比較復雜一點，能夠監控到每一個位元組的進度，可以自己開發或使用第三方庫。一般來說，對於前台類型的頁面，出於安全和可用性不建議使用ActiveX控制項，
D. 如何在手機瀏覽器中運用HTML5的文件API實現上傳多圖功能
Html5終於解決了上傳文件的同時顯示文件上傳進度的老問題。現在大部分的網站用Flash去實現這一功能，還有一些網站繼續採用Html <form>with enctype=multipart/form-data，但是需要修改伺服器端可用才能顯示給用戶文件上傳的進度。本質上你需要做的工作是在伺服器端接收一個文件時，你發送給它一個位元組流，所以你需要知道你已經接收到多少位元組並以某種方式傳達這些信息給客戶端瀏覽器，在這個過程一直在不斷的進行文件的上傳。這種方式運行的非常好，不像Flash上傳那這樣充滿了問題(特別是處理大文件上傳的時候)，然而這種方法是相當復雜的並且聽起來不容易理解，因為你本質上是接管了整個伺服器端的處理（獲取位元組流的時候）同時包括了在伺服器端實現multipart/form-data協議，伴隨一系列的其他事情。
使用Html5 上傳文件
XMLHttpRequest 在Html5 規范中已經有全新的變化，規定了XMLHttpRequest Level 2規范（目前最新版本）包含下列新的特性：
處理位元組流，例如作為上傳或者下載的File，Blob，FormData對象
上傳或者下載中的進度事件
跨站點請求
允許創建匿名請求
可以設置請求超時
在這篇文章中我們將能夠更清楚的看到#1和#2兩個特性。通常，上傳文件用XMLHttpRequest並且提供上傳進度信息給最終的用戶，需要注意的是這種方式解決了不需要伺服器端做任何改變，至少是目前處理multipart/form-data協議。所以伺服器端的處理邏輯保留不變，這使得開發者適應這種技術相當容易。
圖1：文件上傳畫面-准備上傳 圖2：顯示上傳完成畫面
注意：上面的圖片中，信息提示區域是提供給用戶的：
當前選中文件的信息
文件名
文件大小
文件類型
上傳完成多少的百分比進度條
上傳速度或者上傳帶寬
距離上傳完成大概還有多長時間
已上傳文件大小
伺服器端的響應
上面第6項或許看起來不重要，但事實上是相當重要的。因為我們用XMLHttpRequest，上傳發生在後台，頁面沒有發生跳轉等任何變化，所以對於你用它處理其他一些事情來說是一個非常好的特性。
Html5 Progress Event
對於Html5 Progress Events規范，Html5 Progess Events提供了下列與本次討論相關的信息
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
請注意到我們需要用兩個信息去計算要顯示給用戶的其他所有信息。要計算出來其他的信息通過上面我們得到信息是相當容易的，但是那需要一些額外的代碼並且創建一個定時器。
Html5 Progress Event 應該是什麼
考慮到有一部分人想更好的提供給用戶所有的信息，所以Html5 Progress Event應該更好的滿足需要，因為它給瀏覽器供應商提供這些額外信息是相當簡單的，所以建議progress event應該修改成如下：
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
transferSpeed long類型
timeRemaining JavaScript 日期對象
Html5 上傳 用XMLHttpRequest
瀏覽器支持情況
支持這一特性的瀏覽器最低版本
Firefox 4.0 beta 6
Chrome 6
Safari 5.02
IE 9 Beta and Opera 10.62 不支持這一特性
簡單的示例
下面是一個完整的Html頁麵包含了實現文件上傳並帶有進度提示的JavaScript代碼，只是實現了基本的功能，感興趣的可以自己做擴展。 需要吧上傳介面修改成自己服務的。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<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", "upload.do");//修改成自己的介面
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 伺服器端返回響應時候觸發event事件*/
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>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
E. 前端上傳文件實時顯示進度條和上傳速度的工作原理是怎樣的
xhr對象的upload.onprogress事件在上傳過程中會多次回調
可以獲取到當前上傳的位元組數、總位元組數、時間戳等信息
根據上傳位元組數和總位元組數計算上傳百分比
根據時間戳可以判斷兩次progress事件間隔，再判斷此期間內的上傳位元組數，做個除法就是上傳速度
F. html5文件上傳實現進度條需要後端嗎
不需要後端的，前端自己判斷，代碼如下：
function uploadFile(){
// 獲取上傳文件，放到 formData對象裡面
var pic = $("#myhead").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
$.ajax({
type: "POST",
url: "upload",
data: formData ,//這里上傳的數據使用了formData 對象
processData : false,
//必須false才會自動加上正確的Content-Type
contentType : false ,
//這里我們先拿到jQuery產生的 XMLHttpRequest對象，為其增加 progress 事件綁定，然後再返回交給ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
G. jsp 在html5中實現 斷點續傳 進度條 要完成的案例，包括 jsp servlet
可以把進度信息放在cookie里，下次打開瀏覽器，到上傳頁面以後，從cookie中上次的讀取進度信息，上傳時，讀取上傳文件到上次進度位置，繼續上傳
H. 如何用js+html+server端代碼實現上傳文件並帶進度條
直接使用一個上傳組件就行了，沒必要自己實現的。
建議使用網路提供的webuploader文件上傳插件可以輕松實現你的需求
I. html上傳文件代碼
在HTML標准中，XMLHttpRequest對象被重新定義，被稱為「XMLHttpRequest Level 2」，其中包含了以下5個新特性：
1、支持上傳、下載位元組流，比如文件、blob以及表單數據。
2、增加了上傳、下載中的進度事件。
3、跨域請求的支持。
4、允許發送匿名請求（即不發送HTTP的Referer部分）。
5、允許設置請求的超時。
在這篇教程中，我們主要關注第一和第二項特性，尤其是第二項——它能夠提供我們想要的上傳進度。和之前的方案不同，這個方案並不要求伺服器作出特殊的設置，因此大家邊看教程就可以邊動手試試了。
上面圖示的就是我們能夠實現的內容：
1、顯示上傳的文件信息，比如文件名、類型、尺寸。
2、一個能夠顯示真實進度的進度條。
3、上傳的速度。
4、剩餘時間的估算。
5、已上傳的數據量。
6、上傳結束後伺服器返回的響應。
另外，憑借XMLHttpRequest，我們的上傳過程整個都是非同步的，因此用戶在上傳文件的時候，依然可以操作網頁當中的其它元素，並不需要專門等待上傳的完成。而在上傳結束後，我們能夠獲取伺服器發回的響應，因此整個上傳過程都顯得相當順理成章。
J. html5怎麼控制進度條
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Inserttitlehere</title>
</head>
<style>
.jdtbox{
padding:10px0;
}
.jdt_dbg{
background:#fce5e5;
width:196px;
height:18px;
border-radius:10px;
-webkit-border-radius:10px;
overflow:hidden;
border-top:1pxsolid#f9d1d1;
}
.jdt_mbg{
background:#f12938;
height:18px;
width:75%;
height:20px;
}
</style>
<scripttype="text/javascript">
$(function(){
$(".jdt_mbg").animate({
width:"50%",
},1000);
});
</script>
<body>
<formaction="http://192.168.1.106:8080/app/img/multiUpload"method="post"enctype="multipart/form-data"name="upload_form">
<label>選擇圖片文件</label>
<inputname="imgFile"type="file"multiple="multiple"accept="image/gif,image/jpeg"/>
<inputname="upload"type="submit"value="上傳"/>
</form>
<divclass="jdtbox">
<divclass="jdt_dbg">
<divclass="jdt_mbg"style="width:${investDetail.percent*100"></div>
</div>
</div>
</body>
</html>