おそようございます.yuuです.
今回は「アップロード状況を確認できるプログレスバーを実装してみよう」ということでやっていきたいと思います.
ちなみにアップロードに関してはこちらとか見てみて下さい.(宣伝じゃないよ)
アップロード状況を取得するには,onprogressイベントを使用します.
以下に簡単な使用例を紹介します.
まずはhtmlから.
<progress>〜</progress>は,非対応ブラウザ用に進捗状況をテキストで出力することが推奨されていますが,今回は外でパーセンテージを出してるので<label>を挿入.
progressはhtml5で追加された要素になります.
0%
次にJavaScriptです.
fileUploadはdataTransfer.filesから取得したfileを引数として呼び出す関数です.
「dataTransfer?」って方は記事上部のリンクへどうぞ.(宣伝じゃないよ)
function fileUpload(file){ var xhr = new XMLHttpRequest(); var formData = new FormData(); var sendUrl = 'http://localhost:8080/upload/'+file.name // アップロード先 var progressBar = document.querySelector('#progress-area>progress'); var percentage = document.querySelector('#progress-area>span.percentage'); formData.append('name', file.name); formData.append('file', file); // アップロードスタートイベント xhr.uplad.onloadstart = function(e){ progressBar.max = e.total; progressBar.value = e.loaded; } // アップロード更新イベント xhr.upload.onprogress = function(e){ progressBar.value = e.loaded; percentage.textContent = Math.floor(progressBar.position * 100) + '%'; } // アップロード完了イベント xhr.upload.onloadend = function(e){ percentage.textContent = '100% Successfull'; } xhr.open('POST', encodeURI(sendUrl)); xhr.send(formData); }
onloadstart,onprogress,onloadend以外にもontimeout,onabort,onerrorなどのイベントもあります.適宜使用していきましょう.
今回は以上になります.多分一週間後にまた登場予定です.
なんか,コード貼って終わりな感じがあるけどいいのでしょうか?
Find help and support to setup your HP Printer for Windows and Mac OS.
返信削除HP Printer Assistant | 123.hp.com/setup | Brother Printer Support Number | Brother Printer hl-2270dw Wireless Setup
The progression of a lengthy computer process, such as a download, file transfer, or installation, is visualised using a progress bar, which is a graphical control element. On occasion, a written representation of the progress in % format is included with the visual.https://webdesignslash.com.au/professional-branding-services/
返信削除