HTML5利用FormData对象实现显示进度条的文件上传

it2022-05-05 122

摘自：https://blog.csdn.net/q1056843325/article/details/53759963

自己做是按这个实现的，兼容性还不错

完整简约的解决方案

下面的代码清单是包括能够支持的最小文件与进度指示器上传所需的JavaScript和HTML整个页面我尽量保证它的简洁所以如果你想要使用自己的布局和显示信息可以借此扩展 HTML5还引入了progress标签用于显示进度 progress元素有max和value属性，因此使用它可以更方便的显示进度但是，在写这篇文章的时候，只有Chrome6支持这个元素所以我在这个简约的解决方案没有使用它

更改服务器端脚本的URL 请务必将URL更改为指向你上传文件的服务器端URL 在下面的代码清单中 UploadMinimal.aspx的uploadFile()方法： xhr.open("POST", "UploadMinimal.aspx");

<!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", "UploadMinimal.aspx"); 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 = '无法计算'; } } function uploadComplete(evt) { /* 当服务器响应后，这个事件就会被触发 */ alert(evt.target.responseText); } function uploadFailed(evt) { alert("上传文件发生了错误尝试"); } function uploadCanceled(evt) { alert("上传被用户取消或者浏览器断开连接"); } </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> 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

【代码6：完整简约的代码清单】

嗯，这是几乎涵盖了所有新版HTML5功能的简约版本在图片2中大家也看到了，获取其他信息需要数学知识这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用例如获取上传的速率（上传速度）我做了以下几点：

在uploadProgress(evt)事件中，存储evt.loaded和evt.total作为全局变量创建了一个每秒触发的计时器事件在定时器的回调中，获取了传输字节的差值（与1s之前的差）每秒上传字节数得到上传速度

在这里，我还设置了定时器每500毫秒获取从而更加精细

<!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", "UploadMinimal.aspx"); 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 = '无法计算'; } } function uploadComplete(evt) { /* 当服务器响应后，这个事件就会被触发 */ alert(evt.target.responseText); } function uploadFailed(evt) { alert("上传文件发生了错误尝试"); } function uploadCanceled(evt) { alert("上传被用户取消或者浏览器断开连接"); } </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" οnchange="fileSelected();"/> </div> <div id="fileName"></div> <div id="fileSize"></div> <div id="fileType"></div> <div class="row"> <input type="button" οnclick="uploadFile()" value="Upload" /> </div> <div id="progressNumber"></div> </form> </body> </html>

在这里，我还设置了定时器每500毫秒获取从而更加精细

完整简约的解决方案

【代码6：完整简约的代码清单】

在这里，我还设置了定时器每500毫秒获取从而更加精细

转载于:https://www.cnblogs.com/lichuntian/p/9799701.html

相关资源：各显卡算力对照表！

专利

最新回复(0)