目录
一、使用xhr实现文件上传功能1、定义UI结构2、验证用户是否选择了文件3、向FormData中追加文件4、使用xhr发起上传文件的请求5、监听onreadyStatechange事件 二、xhr案例（实现文件带进度条上传）1、基于Bootstrap绘制进度条效果2、动态设置进度条3、监听上传完成的事件完整代码运行结果 二、使用jQuery实现文件上传功能1、定义UI结构2、验证用户是否选择了文件3、向FornData中追加文件4、使用jQuery发起上传文件的请求 四、jQuery案例(实现文件带loading效果上传)1、通过ajaxStart(callback)展示loading效果2、通过ajaxStop(callback)隐藏loading效果完整代码运行结果一、使用xhr实现文件上传功能
实现步骤：定义UI结构 → 验证用户是否选择了文件 → 向FornData中追加文件 → 使用xhr发起上传文件的请求 → 监听onreadyStatechange事件
1、定义UI结构
<!--1. 文件选择框 --><input type="file" id="file1"><!-- 2. 上传文件按钮 --><button id="btnUpload">上传文件</button><br /><!-- 3.img标签用来显示上传成功以后的图片 --><img src="" id="img" width="800">
2、验证用户是否选择了文件
// 1.获取上传文件的按钮var btnUpload = document.querySelector('#btnUpload');// 2. 为按钮绑定单击事件处理函数btnUpload.addEventListener('click',function(){// 3.获取到选择的文件列表var files = document.querySelector("#file1").files;if(files.length<=0){return alert ('请选择要上传的文件');}})
3、向FormData中追加文件
// 1.创建formdata对象var fd = new FormData();// 2.向formdata中追加文件fd.append("avatar",files[0])
4、使用xhr发起上传文件的请求
// 1.创建xhrvar xhr = new XMLHttpRequest();// 2.创建请求xhr.open("POST",'http://www.liulongbin.top:3006/api/upload/avator');// 3.发起请求xhr.send(fd);
5、监听onreadyStatechange事件
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {var data = JSON.parse(xhr.responseText)if (data.status === 200) {// 上传成功document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url} else {// 上传失败console.log('图片上传失败！' + data.message)}}}
二、xhr案例（实现文件带进度条上传）
1、基于Bootstrap绘制进度条效果
Bootstrap进度条地址：/components/#progress
<!-- 引入Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- bootstrap 中的进度条 --><div class="progress" style="width: 500px; margin: 15px 10px;"><div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">0%</div></div>
2、动态设置进度条
基于jQuery操作DOM，调用attr属性设置style样式
引入jQuery<script src="/jquery-3.1.1.min.js"></script>// 监听文件上传的进度xhr.upload.onprogress = function (e) {if (e.lengthComputable) {// 计算出上传的进度var procentComplete = Math.ceil((e.loaded / e.total) * 100)console.log(procentComplete)// 动态设置进度条$('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')}}
3、监听上传完成的事件
xhr.upload.onload = function () {// removeClass()：移除上传中的类样式；addClass()添加上传完成的类样式$('#percent').removeClass().addClass('progress-bar progress-bar-success')}
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引入bootstrap--><link rel="stylesheet" href="/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- 引入jQuery --><script src="/jquery-3.1.1.min.js"></script></head><body><!-- 1. 文件选择框 --><input type="file" id="file1" /><!-- 2. 上传文件的按钮 --><button id="btnUpload">上传文件</button><!-- bootstrap 中的进度条 --><div class="progress" style="width: 500px; margin: 15px 10px;"><div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">0%</div></div><br /><!-- 3. img 标签，来显示上传成功以后的图片 --><img src="" alt="" id="img" width="800" /><script>// 1. 获取到文件上传按钮var btnUpload = document.querySelector('#btnUpload')// 2. 为按钮绑定单击事件处理函数btnUpload.addEventListener('click', function () {// 3. 获取到用户选择的文件列表var files = document.querySelector('#file1').filesif (files.length <= 0) {return alert('请选择要上传的文件！')}var fd = new FormData()// 将用户选择的文件，添加到 FormData 中fd.append('avatar', files[0])var xhr = new XMLHttpRequest()// 监听文件上传的进度xhr.upload.onprogress = function (e) {if (e.lengthComputable) {// 计算出上传的进度var procentComplete = Math.ceil((e.loaded / e.total) * 100)console.log(procentComplete)// 动态设置进度条$('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')}}xhr.upload.onload = function () {$('#percent').removeClass().addClass('progress-bar progress-bar-success')}xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')xhr.send(fd)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {var data = JSON.parse(xhr.responseText)if (data.status === 200) {// 上传成功document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url} else {// 上传失败console.log('图片上传失败！' + data.message)}}}})</script></body></html>
运行结果
二、使用jQuery实现文件上传功能
实现步骤：定义UI结构 → 验证用户是否选择了文件 → 向FornData中追加文件 → 使用jQuery发起上传文件的请求
1、定义UI结构
<!-- 引入jQuery --><script src="/jquery-3.1.1.min.js"></script><!-- 文件选择框 --><input type="file" id="file1" /><button id="btnUpload">上传文件</button><br /><img src="/image_search/src=http%3A%2F%2Fhbimg.%2Fd590c78cda71722a604c44b80e79c7392eed11edd280-S5faVN_fw658&refer=http%3A%2F%2Fhbimg.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668831485&t=ad1842680bf433c15ba9b8ced946a2bd" alt="" style="display: none;" id="loading" />
2、验证用户是否选择了文件
$('#btnUpload').on('click', function () {var files = $('#file1')[0].filesif (files.length <= 0) {return alert('请选择文件后再上传！')}})
3、向FornData中追加文件
var fd = new FormData();fd.append('avatar', files[0]);
4、使用jQuery发起上传文件的请求
使用jQuery上传文件，固定写法：contentType: false, processData: false,
contentType: false：不修改Content-Type属性，使用FormData默认的Content-Type值
processData: false：不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器
$.ajax({method: 'POST',url: 'http://www.liulongbin.top:3006/api/upload/avatar',data: fd,// 不修改Content-Type属性，使用FormData默认的Content-Type值contentType: false,// 不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器processData: false,success: function (res) {console.log(res)}})
四、jQuery案例(实现文件带loading效果上传)
1、通过ajaxStart(callback)展示loading效果
ajaxStart(callback)：Ajax请求开始时，执行ajaxStart()函数，可以在ajaxStart的回调函数中显示loading效果
注意点
① 从jQuery1.8版本起，ajaxStart()只能被附加在document身上，不能添加到body身上
②$(document).ajaxStart()函数会监听当前文档内所有的Ajax请求
// 监听到Ajax请求被发起了$(document).ajaxStart(function () {$('#loading').show()})
2、通过ajaxStop(callback)隐藏loading效果
ajaxStop(callback)：Ajax请求结束时，执行ajaxStop()函数，可以在ajaxStop的回调函数中隐藏loading效果
// 监听到 Ajax 完成的事件$(document).ajaxStop(function () {$('#loading').hide()})
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引入jQuery --><script src="/jquery-3.1.1.min.js"></script></head><body><input type="file" id="file1" /><button id="btnUpload">上传文件</button><br /><img src="/image_search/src=http%3A%2F%2Fhbimg.%2Fd590c78cda71722a604c44b80e79c7392eed11edd280-S5faVN_fw658&refer=http%3A%2F%2Fhbimg.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668831485&t=ad1842680bf433c15ba9b8ced946a2bd" alt="" style="display: none;" id="loading" /><script>$(function () {// 监听到Ajax请求被发起了$(document).ajaxStart(function () {$('#loading').show()})// 监听到 Ajax 完成的事件$(document).ajaxStop(function () {$('#loading').hide()})$('#btnUpload').on('click', function () {var files = $('#file1')[0].filesif (files.length <= 0) {return alert('请选择文件后再上传！')}var fd = new FormData()fd.append('avatar', files[0])// 发起 jQuery 的 Ajax 请求，上传文件$.ajax({method: 'POST',url: 'http://www.liulongbin.top:3006/api/upload/avatar',data: fd,processData: false,contentType: false,success: function (res) {console.log(res)}})})})</script></body></html>
