建独立的网站seo搜索引擎优化推广专员
在我以前的文章中，我们发现了如何使用HTML5文件拖放 ， 使用JavaScript打开文件以及使用Ajax异步上传文件 。 在本系列的最后一部分，我们介绍了过程中最激动人心的部分：图形进度条！
文件上传进度条提供了基本的用户反馈，但是众所周知，它们很难实现。 到现在为止。 Firefox和Chrome均支持XMLHttpRequest2对象，该对象提供了进度事件处理程序。 但是首先，让我们考虑一下如何实现进度条...
HTML5进度标签
新的progress标签提供两个属性：
- value ：当前进度值
- max ：完成时的值
该标记在此演示中非常理想，尽管Chrome支持该标记，但仅出现在Firefox 6中 。 此外，这两种浏览器都没有提供许多样式属性，因此我放弃了它，转而使用标准p标签。 这是作为子级附加到ID为“ progress”的div的。
样式进度栏
我们的p标签将在一个大小为250px的带边框的框中显示文件名：
#progress p
{display: block;width: 240px;padding: 2px 5px;margin: 2px 0;border: 1px inset #446;border-radius: 5px;
}
对于绿色条本身，我创建了一个图形，该图形的宽度是进度元素（500px）的两倍。 左边的250px是彩色的，右边的250px是透明的：
该图形用作进度条的背景图像，并位于“ X％0”处，其中X％表示剩余（未完成）的比例，即
- 进度从“背景位置：100％0”开始，即剩余100％
- 进度在“背景位置：0％0”处结束，即没有剩余
- “背景位置：30％0”表示70％已完成：
通过在上传成功或失败时设置类来应用纯色：
#progress p.success
{background: #0c0 none 0 0 no-repeat;
}#progress p.failed
{background: #c00 none 0 0 no-repeat;
}
在JavaScript中实现进度条
现在，我们可以修改UploadFile（）函数。 当遇到有效的JPG文件时，我们将一个新的p标签附加到#progress元素上，并将文件名添加为文本：
// upload JPEG files
function UploadFile(file) {var xhr = new XMLHttpRequest();if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {// create progress barvar o = $id("progress");var progress = o.appendChild(document.createElement("p"));progress.appendChild(document.createTextNode("upload " + file.name));
现在，我们需要一个“进度”事件处理函数。 这将接收到一个具有.loaded和.total属性的对象-计算新的backgroundPosition需要一些数学运算：
// progress barxhr.upload.addEventListener("progress", function(e) {var pc = parseInt(100 - (e.loaded / e.total * 100));progress.style.backgroundPosition = pc + "% 0";}, false);
如果您熟悉Ajax，您将认识到onreadystatechange事件处理程序。 这将确定上传何时完成，并相应地设置进度条的样式（如果上传成功，则将类别设置为“成功”）：
// file received/failedxhr.onreadystatechange = function(e) {if (xhr.readyState == 4) {progress.className = (xhr.status == 200 ? "success" : "failure");}};
最后，我们像以前一样将文件发送到我们的PHP服务器：
// start uploadxhr.open("POST", $id("upload").action, true);xhr.setRequestHeader("X-FILENAME", file.name);xhr.send(file);}}
我们终于有了一个解决方案，它可以：
- 允许将文件拖放到网页元素上
- 分析并在客户端上显示删除的文件
- 异步上传文件到服务器
- 在上传过程中显示图形进度条
- 使用渐进增强功能来支持大多数浏览器
- 无需JavaScript库即可进行编码。
请查看演示页面 ，但是请注意，该页面托管在没有PHP的服务器上，因此不会发生文件上传。 要对其进行测试，请下载文件以检查代码并将其托管在您自己的服务器上。
我希望您喜欢这个系列，并正在考虑文件拖放如何帮助您的Web应用程序。
如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如Learn HTML5 。
From: https://www.sitepoint.com/html5-javascript-file-upload-progress-bar/