jQuery+ajax实现文件上传功能
jQuery+ajax实现文件上传功能(显示文件上传进度)，供大家参考，具体内容如下 具体实现步骤 1、定义UI结构,引入bootstrap的CSS文件和jQuery文件
2、给上传按钮绑定点击事件
3、验证是否选择了文件
4、向FormData中追加文件
5、使用ajax发起上传文件的请求
6、设置文件的路径
7、使用xhr获得文件上传的进度
8、当文件上传完成让进度条显示绿色
<style> #loading { width: 20px; height: 20px; } #img { display: bl
### 使用jQuery与Ajax实现文件上传功能（含上传进度显示）
#### 概述
本文将详细介绍如何利用jQuery和Ajax技术来实现文件上传的功能，并且能够实时显示文件上传的进度。此功能在很多应用场景下非常实用，比如用户上传头像、文档等场景。
#### 实现步骤
1. **定义UI结构并引入必要的文件**
我们需要定义一个基本的用户界面（UI）结构。这包括文件输入框、上传按钮、进度条以及一个用于预览上传文件的图片展示区域。此外，为了美化界面，我们还需要引入Bootstrap CSS文件和jQuery库。
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<input type="file" name="" id="ipt" multiple>
<button id="btn" type="submit">上传文件</button>
<div class="progress">
<div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
0%
</div>
</div>
<img src="" alt="" id="img" style="display:none;">
```
2. **给上传按钮绑定点击事件**
使用jQuery为上传按钮绑定点击事件，以便触发文件上传过程。
```javascript
$('#btn').on('click', function() {
// 文件上传逻辑
});
```
3. **验证是否选择了文件**
在用户点击上传按钮时，检查是否已选择文件。如果没有选择任何文件，则给出提示。
```javascript
var file = $('#ipt')[0].files;
if (file.length <= 0) {
alert('请上传文件');
return;
}
```
4. **向FormData中追加文件**
创建一个新的`FormData`对象，并将选中的文件追加到其中。
```javascript
var fd = new FormData();
fd.append('avatar', file[0]);
```
5. **使用Ajax发起上传文件的请求**
使用jQuery的`$.ajax()`方法来发送文件数据到服务器端。
```javascript
$.ajax({
type: 'POST',
url: 'http://www.example.com/api/upload',
contentType: false, // 禁止对数据进行content-type类型的编码
processData: false, // 不处理数据
data: fd,
// 其他Ajax配置项
});
```
6. **设置文件的路径**
成功上传后，通过响应结果中的URL更新图片展示区的`src`属性，以便用户可以看到上传成功的文件。
```javascript
success: function(res) {
if (res.status !== 200) {
alert(res.msg);
return;
}
$('#img').attr('src', res.url).css('display', 'block');
}
```
7. **使用XHR获得文件上传的进度**
为了显示文件上传的进度，可以利用`XMLHttpRequest`对象的`upload`属性的`onprogress`事件。这个事件会在每次文件上传时被触发，并提供上传进度的信息。
```javascript
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = Math.ceil((e.loaded / e.total) * 100);
$('#progress').css('width', percentComplete + '%').html(percentComplete + '%');
}
};
return xhr;
}
```
8. **当文件上传完成让进度条显示绿色**
当文件上传完成后，可以改变进度条的颜色以指示文件已经完全上传。
```javascript
complete: function() {
$('#progress').addClass('progress-bar-success');
}
```
通过以上步骤，我们可以实现一个基本的文件上传功能，并且能够在用户界面上显示文件上传的实时进度。这种方式不仅提高了用户体验，同时也增加了应用的实用性。
