Last active
October 24, 2016 11:08
-
-
Save yangfch3/62eeaf5b02562efdec551f352be79e89 to your computer and use it in GitHub Desktop.
ajax 上传进度条 demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-cmn-Hans"> | |
| <head> | |
| <meta http-equiv="Access-Control-Allow-Origin" content="*"> | |
| <meta charset="utf-8"> | |
| <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <meta name="renderer" content="webkit"> | |
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | |
| <title>Hi</title> | |
| </head> | |
| <body> | |
| <input id="upFile" , type="file" value="选择文件" name="upFile"> | |
| <br/> | |
| <!-- 当然，如果你要考虑兼容性，那么着了可以选择非 progress --> | |
| <progress id="progress" value="0"></progress> | |
| <button id="button">Start uploading</button> | |
| <span id="display"></span> | |
| <!-- 见我的 gist 里的 ajax.js --> | |
| <script src="./ajax.js"></script> | |
| <script> | |
| var progressBar = document.getElementById("progress"), | |
| loadBtn = document.getElementById("button"), | |
| display = document.getElementById("display"); | |
| upFile = document.getElementById("upFile"); | |
| function upload(data) { | |
| // 其他可用于文件上传操作练习的 API：http://malsup.com/jquery/form/file-echo2.php | |
| var xhr = new Ajax('https://zinoui.com/demo/progress-bar/upload.php', null, data, { | |
| method: 'post', | |
| 'Content-Type': 'multipart/form-data', | |
| // 多余地设置 withCredentials 为 true 可能会造成报错 | |
| // withCredentials: true, | |
| upload: { | |
| onprogress: function(e) { | |
| if (e.lengthComputable) { | |
| progressBar.max = e.total; | |
| progressBar.value = e.loaded; | |
| display.innerText = Math.floor((e.loaded / e.total) * 100) + '%'; | |
| } | |
| }, | |
| onloadstart: function(e) { | |
| progressBar.value = 0; | |
| display.innerText = '0%'; | |
| }, | |
| onloadend: function(e) { | |
| progressBar.value = e.loaded; | |
| loadBtn.disabled = false; | |
| loadBtn.innerHTML = 'Start uploading'; | |
| } | |
| } | |
| }); | |
| } | |
| function buildFormData() { | |
| var fd = new FormData(); | |
| fd.append('file', upFile.files[0]); | |
| // for (var i = 0; i < 3000; i += 1) { | |
| // fd.append('data[]', Math.floor(Math.random() * 999999)); | |
| // } | |
| return fd; | |
| } | |
| loadBtn.addEventListener("click", function(e) { | |
| this.disabled = true; | |
| this.innerHTML = "Uploading..."; | |
| upload(buildFormData()); | |
| }); | |
| // 服务器端代码 | |
| // <?php | |
| // header('Access-Control-Allow-Origin: *'); | |
| // header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); | |
| // foreach($_FILES as $file) { | |
| // $n = $file['name']; | |
| // $s = $file['size']; | |
| // if (is_array($n)) { | |
| // $c = count($n); | |
| // for ($i=0; $i < $c; $i++) { | |
| // echo "<br>uploaded: " . $n[$i] . " (" . $s[$i] . " bytes)"; | |
| // } | |
| // } | |
| // else { | |
| // echo "<br>uploaded: $n ($s bytes)"; | |
| // } | |
| // } | |
| // ?> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment