基于HTML5 Ajax文件上传进度条如何实现（jquery版本

HTML5基于AJAX的文件上传进度条实现过程

今天我们来一下如何使用HTML5和AJAX技术实现文件上传进度条。对于那些对HTML5文件上传进度条感兴趣的朋友们，这篇文章将带你一起学习。

我们需要了解HTML5中的一个重要对象——FormData。通过FormData对象，我们可以使用append方法添加key-value数据。与以往我们使用JSON的方式不同的是，FormData可以异步上传二进制文件。

一、创建FormData对象

我们使用以下代码创建一个FormData对象：

```javascript

var formData = new FormData();

```

二、向FormData对象添加数据

我们可以通过append方法向FormData对象添加数据，例如：

```javascript

formData.append("catname", "我是一只喵");

formData.append("age", 1); // 数字类型会自动转为字符串类型

```

我们还可以添加用户选择的文件或Blob对象，例如：

```javascript

formData.append("userfile", fileInputElement.files[0]);

var oFileBody = "hey!";

var oBlob = new Blob([oFileBody], { type: "text/xml"});

formData.append("webmasterfile", oBlob);

```

三、使用FormData对象进行文件上传

接下来，我们使用XMLHttpRequest对象来上传文件：

```javascript

var xhr = new XMLHttpRequest();

xhr.open("POST", "upload");

xhr.send(formData);

```

在HTML部分，我们需要一个文件输入元素和一个上传按钮。我们还需要一个用于显示进度条的div元素。对应的HTML代码和CSS样式如下：

```html

``` 对应的CSS样式为： 父级div用来显示进度条，所以我们设置了宽度和边框样式。子级div用来展示具体的进度条，我们为其设置了背景颜色、文本对齐方式等样式。 接下来是JavaScript部分，我们主要关注file组件的onchange事件方法。 当用户选择文件后，我们可以预览选择的图片并准备上传。 上传文件的逻辑会在uploadFile方法中实现。在此之前，我们需要简单了解一下进度事件（Progress Events）。Progress Events规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最初是针对XHR操作的，但目前也被其他API借鉴。 在showPic方法中，我们从file对象获取上传的文件，并将其设置为img元素的src属性，以便在页面上即时预览所选文件。 我们将在uploadFile方法中实现文件上传的逻辑。在这个方法中，我们将使用之前创建的FormData对象和XMLHttpRequest对象来上传文件，并处理上传过程中的进度事件以更新进度条。 通过使用HTML5和AJAX技术，我们可以轻松地实现文件上传进度条功能，为用户提供更好的用户体验。希望这篇文章能帮助你对HTML5文件上传进度条的实现有更深入的了解。在数据的传输与接收过程中，我们常常会关注进度情况，特别是在文件上传时。为了更直观地展示这一过程，我们需要深入理解一些关键事件及其背后的工作原理。

当我们在浏览器中接收到数据的第一个字节时，会触发一个名为“loadstart”的事件。而“progress”事件则会在浏览器接收新数据期间持续不断地触发，这是一个由Mozilla提出的机制，旨在为我们提供实时的数据传输进度信息。这个事件会周期性地触发，让我们有机会追踪上传或下载的进度。

当请求发生错误或我们主动调用abort()方法终止链接时，会触发“error”或“abort”事件。而一旦接收到完整的响应数据，便会触发“load”事件。无论是因为通信完成还是触发了error、abort或load事件，都会触发“loadend”事件。

在XMLHttpRequest对象中，我们可以获取到更详细的进度信息。其中，“lengthComputable”属性告诉我们进度信息是否可用，“position”表示已经接收的字节数，而“totalSize”则是根据Content-Length响应头确定的预期字节数。有了这些信息，我们就可以为用户创建一个进度指示器了。

对于使用jQuery的开发者来说，可能一开始会觉得有些困扰，因为jQuery的ajax方法并没有直接提供关于progress事件的操作。但经过深入研究，我们会发现jQuery的ajax方法其实可以指定使用哪个XMLHttpRequest对象。这样，我们就可以为其增加progress事件的绑定了。

在文件上传的情境中，我们可以采用FormData对象来封装上传的文件。然后，通过jQuery的ajax方法发送POST请求。在这个过程中，我们首先获取到jQuery产生的XMLHttpRequest对象，为其增加progress事件绑定，然后再返回给ajax使用。这样，每当有数据上传或下载时，都会触发progress事件，我们可以利用这个事件来更新上传进度。

具体来说，“onprogress”方法会大概每0.05-0.1秒执行一次，用于侦查附件上传情况。这个方法会接收到一个evt对象，其中的“loaded”属性表示已经上传的大小，“total”属性表示附件的总大小。通过计算已经上传的百分比，我们可以实时更新页面上的进度条。

《html5图片上传》

在这个数字化时代，上传图片已经成为我们日常生活中不可或缺的一部分。今天，我们将通过html5技术实现一个简单的图片上传功能，让你轻松上传图片并实时查看上传进度。

我们创建一个基本的HTML页面，包含一张图片展示区域、一个文件输入框用于选择图片，以及一个上传按钮。在页面加载完成后，你可以立即看到图片展示区域中的图片。

当你选择了一张新的图片后，触发`showPic()`函数，该函数将获取你选择的图片文件，并将其显示在展示区域中。`uploadFile()`函数会被调用，准备将图片文件上传到服务器。

`uploadFile()`函数使用jQuery的ajax方法实现图片的上传。通过设置`processData`和`contentType`属性为`false`，我们可以避免jQuery对`FormData`的默认处理，确保正确的Content-Type被自动加上。通过监听上传事件的`progress`属性，我们可以实时获取上传进度，并在页面上显示。

在页面上，我们有一个进度条，通过`onprogress()`函数实时更新进度条的宽度和已上传的百分比。这样，你可以随时了解图片上传的进度情况。

这个简单的html5图片上传功能让你轻松上传图片并实时查看上传进度。无需等待漫长的上传过程，你可以随时了解上传的进度情况，让你更加安心地等待图片上传完成。现在，让我们开始体验这个便捷的html5图片上传功能吧！

我们使用`cambrian.render('body')`来渲染页面元素到指定的HTML元素中。这样，你就可以在浏览器中看到这个完整的图片上传页面了。现在，你可以开始选择图片并上传了！