一、使用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.创建xhr
var 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进度条地址：https://v3.bootcss.com/components/#progress

 <!-- 引入Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/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="https://code.jquery.com/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="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- 引入jQuery --><script src="https://code.jquery.com/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="https://code.jquery.com/jquery-3.1.1.min.js"></script><!-- 文件选择框 -->
<input type="file" id="file1" />
<button id="btnUpload">上传文件</button><br />
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd590c78cda71722a604c44b80e79c7392eed11edd280-S5faVN_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&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="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head><body><input type="file" id="file1" /><button id="btnUpload">上传文件</button><br /><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd590c78cda71722a604c44b80e79c7392eed11edd280-S5faVN_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&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>

运行结果

通过xhr实现文件上传功能，使用jQuery实现文件上传功能相关推荐

php置顶功能代码,jquery实现页面置顶功能代码
//获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处 ...
功能选中jquery实现全选反选功能
时间紧张,先记一笔,后续优化与完善. 全选功能 $(function () { $('#allchecked').click(function () { ...
springboot 上传文件解析入库_SpringBoot + easyexcel + WebUploader 实现文件上传并解析
1. WebUploader的使用,引入css和js,css其实没什么用: 2. 定义上传框: 选择文件开始上传 3.相关jquery: // 文件上传 jQuery(function() { va ...
uploadify3.1 php,jQuery无刷新上传之uploadify3.1简单使用
昨天在网上找到了一个叫做uploadify的jquery上传插件,看到有几篇文章也是介绍这个插件的,心想何不用这个试试. 不过网上的这几篇文章用到的uploadify还是以前的旧版本uploadify ...
php从ftp下载文件到本地,php使用ftp实现文件上传与下载功能
本文实例为大家分享了php ftp文件上传与下载的具体代码,供大家参考,具体内容如下 ftp文件上传 php自带有ftp操作的函数包,一个比较简单实现的ftp文件上传操作可以通过以下几个步骤来完成: ...
ie6多文件上传_一个好的“文件上传”功能必须要注意的这些点你都知道吗？
检查上传文件扩展名白名单,不属于白名单内,不允许上传:[前端和后端都要做好校验] 上传文件的目录必须是http请求无法直接访问到的.如果需要访问的,必须上传到其他(和web服务器不同的)域名下,并设置 ...
springboot文件上传下载实战 —— 登录功能、展示所有文件
springboot文件上传下载实战创建项目 pom.xml 数据库建表与环境准备建表SQL 配置文件 application.properties 整体架构前端页面登录页面 login.ht ...
记在k8s的pod上使用apache的commons-net:ftp功能时，ftp一直上传文件失败
2019独角兽企业重金招聘Python工程师标准>>> 在k8s的pod上使用apache的commons-net:ftp功能时,一直显示: 即上传文件失败,但是在本地环境进行上传时 ...
ajax上传 java_使用Ajax进行文件与其他参数的上传功能(java开发)
文件上传: 记得前一段时间,为了研究Ajax文件上传,找了很多资料,在网上看到的大部分是form表单的方式提交文件,对于Ajax方式提交文件并且也要提交表单中其他数据,发现提及的并不是很多,后来在同事 ...

通过xhr实现文件上传功能，使用jQuery实现文件上传功能

目录

一、使用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实现文件上传功能，使用jQuery实现文件上传功能相关推荐

最新文章

热门文章