算法的前端入门
HTML基础
HTML网页的大致结构
<html>
<head>
<meta charset="UTF-8">
<title>
<div>
div>
title>
head>
<body>
<h1>...h1>
<ol>
<li>...li>
ol>
<h2>...h2>
<ol>
<li>...li>
ol>
body>
<html>
| 位置标签 | 说明 |
|---|---|
| < div > | 把一些独立的逻辑部分划分出来，比如网页中独立的栏目板块，（用框框框起来的） |
| header | 定义头部标签 |
| < h > | 阶梯层级标签 |
| < span > | 特殊强调标签 |
| < p > | 文本内容标签 |
| < !–注释文字–> | 写注释 |
| < footer > | 底部标签 |
| < section > | 定义一个区域，但是作用等同div |
| < aside > | 我是侧边栏 |
效果标签：
让显示更美观
在html代码中输入空格、回车都是没用的
| 效果标签 | 说明 |
|---|---|
| < br > | 相当于回车（无结束标签） |
| ; | 相当于空格 |
| < hr > | 水平分割线（无结束标签） |
|
|
无序列表标签 |
|
|
有序列表标签 |
| < img src=“ ”alt=“ ” title=“ ”> | 图片地址、下载失败时的替换文本、鼠标提示文本 |
| < a href=“目标网址” title=“提示文本”> < /a > | 实现超链接 |
| < a href= “” target=“ _self/ _blank” | 当前页面打开超链接还是新窗口 |
table标签
| < table border=“1” > | 表格开始,加表格线 |
|---|---|
| < tr > | 表格的行 |
| < th > | 表格头部单元格 |
| < td > | 表格的列 |
| < thead > < tbody > < tfoot > | 有框框包裹的表头表身表尾 |
表单标签
表单就是把浏览者输入的数据传送到服务器端，这样服务器端就可以处理表单传过来的数据
登录页面例子：
用户名: 密码:<form method="post" action="save.php">
<label for="username">用户名:label>
<input type="text" name="username" />
<label for="pass">密码:label>
<input type="password" name="pass" />
form>
语法：
<from> method="传送方式" action="服务器文件"from>
action: 浏览者输入的数据被传送到的地方，比如一个PHP页面
method:数据传送的方式(get/post)
input标签：
用户名、密码 -- 文本输入框、密码输入框：
<input type="text/password" name="名称" value="文本" />
1.type:
type="text": 文本输入框
type="password":密码输入框
2.name:为文本框命名
3.value:为文本输入框设置默认值(提示作用)
<input -placeholder :输入框提示符>
例：<input type="text" placeholder="请输入提示关键字">
数字输入框：
<input type="number">
网址输入框：
<input type="url">
邮箱输入框：
<input type="email">
文本输入域：
<textarea rows="行数" cols="列数">文本textarea>
1.cols:多行输入的列数
2.rows:多行输入的行数
label标签：
<label for="控件id名称"> 输入你的...label>
注意：for的id名称要和接下来的input的type符合
单选框、复选框：
在设计调查表时，用户选择框
1.type:
"radio":单选框
"checkbox":复选框
2.value:提交数据到服务器的值
3.name: 为空间命名
4.checked="checked": 该选项被默认选中
下拉菜单：
select标签里放option标签，表示下拉列表的选项
option标签放选项内容，不放置其他标签
<form>
<select>
<option value="看书">看书option>
<option value="旅游">旅游option>
<option value="运动">运动option>
<option value="购物">购物option>
select>
form>
value:向服务器提交的值
selected="selected" : 默认选中
按钮：
提交按钮：
<input type="submit" value="提交">
values:按钮上显示的文字
<style type="text/css">
span{
color:red/blue;
}
style>
- 代码语法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PFv8Frl8-1673160009213)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1635812495811.png)]
- CSS注释：/* … */
CSS样式：
内联式：
就是把css代码直接写在现有的HTML标签里面
单条：
<p style="color:red">
这里文字是红色。
p>
多条：要写在一个引号里，而且用分号隔开
<p style="color:red ; font-size:12px">
这里文字是红色
p>
嵌入式：
每一个标签都使用内嵌式要累死啊！ 所以要统一写 注意写在head里面
<style type="text/css">
span{
font-size:12px; 设置文字大小
color:red; 文字颜色
font-weight:bold; 字体加粗
}
style>
外部样式：
单独写一个css的代码文件以
.css为扩展名，在head标签内，使用标签把css文件链接到HTML文件中说白了就是导入头文件的意思
优先级顺序： 内联式>嵌入式>外部式 就近原则
CSS选择器
标签选择器：
类选择器：
.类选择器名称{css样式代码}在head标签里面用1.英文圆点开头（代表属性选择）
2.类选择器可以任意起名称，除了中文
造一个标签：
胆小如鼠选择：
.stress{color:red}id选择器：
#id名{color:red}使用前加#号1.id=“id名称”
2.id名称在HTML中只能出现一次，独一无二！！！
类选择器可以对一个元素进行多重修饰
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级span>下学期时，我们班上了一节公开课...p>id选择器不可以，以下代码式错误的
#stressid{ color:red; } #bigsizeid{ font-size:25px; } <p>到了<span id="stressid bigsizeid">三年级span>下学期时，我们班上了一节公开课...p>
子选择器：修饰父标签下的子标签
.food>li{...}其实和标签的层级选择一样 >层级 * 全部 .属性
分组选择：就是俩标签都是一样修饰样式，直接组合到一起
h1,span{color:red}=h1{color:red} span{color:red}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azNlgYBG-1673160009215)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644398447726.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yjAlgM7C-1673160009216)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644398634063.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f3nkIwr4-1673160009217)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644398660567.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KqFeY31n-1673160009217)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644399257749.png)]
层级 * 全部 .属性
分组选择：就是俩标签都是一样修饰样式，直接组合到一起
h1,span{color:red}=h1{color:red} span{color:red}
[外链图片转存中…(img-azNlgYBG-1673160009215)]
[外链图片转存中…(img-yjAlgM7C-1673160009216)]
[外链图片转存中…(img-f3nkIwr4-1673160009217)]
[外链图片转存中…(img-KqFeY31n-1673160009217)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v041Mewb-1673160009218)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644398762163.png)]
Ajax
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
最大的优势：无刷新获取数据
- 懒加载
- 搜索提示
XML：被设计用来传输和存储数据
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中都是自定义标签
HTTP协议：
请求 – >响应
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bISaAkMu-1673160063794)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644236510487.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-URhjMa4a-1673160063796)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644236731911.png)]
发起Ajax请求的三个方法：
- $.get() :向服务器发送数据
- $.post() ：向服务器获取数据
- $.ajax() ：既可以发送也可以获取
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hOKaBxlk-1673160063796)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644374421897.png)]
$.get()
$.get(url,[data],[callback])
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cX3lXHK2-1673160063797)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644240931201.png)]
- 可以发起不带参数的请求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xiBCz6hF-1673160063798)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644241013106.png)]
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>Documenttitle>
<script src="./lib/jquery.js">script>
head>
<body>
<button id="btnGET">发起不带参数的GET请求button>
<script>
$(function () {
$('#btnGET').on('click', function () {
$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
console.log(res)
//res是响应形参，console.log(res)是打印响应
//带参数的get请求
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {console.log(res)
})
})
})
script>
body>
html>
$.post()
<script>
$(function () {
$('#btnPOST').on('click', function () {
$.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) {
console.log(res)
})
})
})
script>
body>
$.ajax()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pGxgbWmC-1673160063799)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644242818215.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPaI9fzC-1673160063800)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644242890655.png)]
<body>
<button id="btnGET">发起GET请求button>
<script>
$(function () {
$('#btnGET').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {
id: 1
},
success: function (res) {
console.log(res)
}
})
})
})
script>
body>
XMLHttpRequest基本使用
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
基于xhr对象封装出来的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Ckk9G57-1673160063802)(D:%5Cpicture%5CScreenshot_20220209_101524_tv.danmaku.bilibilihd.jpg)]
使用xhr对象发起Get请求：
步骤：
1.创建xhr对象2.调用xhr.open()函数
3.调用xhr.send()函数
4.监听xhr.onreadystatechange事件
1.创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
2.调用xhr.open()函数
xhr.open('GET','http://liulongbin.top:3006/api/getbooks')
3.调用xhr.send()函数
xhr.send()
4.监听xhr.onreadystatechange事件
xhr.onreadystatechange = function()
{
//监听xhr对象的请求状态 readyState ; 与服务器响应的状态 status
if(xhr.readyState == 4 && xhr.status ==200 )
{
//打印服务器响应回来的数据
console.log(xhr.responseText)
}
}
xhr对象的readyState属性：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mmzy5VMe-1673160063802)(D:%5Cpicture%5CScreenshot_20220209_103214_tv.danmaku.bilibilihd.jpg)]
使用xhr对象发起带参数的GET请求，只需要在调用xhr.open()期间，为URL指定地址就好了
也就查询字符串
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')
查询字符串
定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。
格式：将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RSmwZc34-1673160063803)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644374567885.png)]
本质：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lTH7r2Ew-1673160063804)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644374714888.png)]
URL编码
URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。
如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。
URL编码的原则：
使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
URL编码原则的通俗理解：
使用英文字符去表示非英文字符。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OY4McDaT-1673160063805)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644374836823.png)]
如何进行编码？
浏览器提供了 URL 编码与解码的 API，分别是：
-
encodeURI() 编码的函数
-
decodeURI() 解码的函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7RoiF9UR-1673160063805)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644374914561.png)]
由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。
xhr创建post请求
①创建 xhr 对象
②调用 xhr.open() 函数
③设置 Content-Type 属性（固定写法）
④调用 xhr.send() 函数，同时指定要发送的数据
⑤监听 xhr.onreadystatechange 事件
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
JSON
概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，
因此，JSON 的本质是字符串。
作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
对象结构：
数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLnzziCz-1673160063807)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644375372746.png)]
数组结构：
数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IaB7l5qp-1673160063808)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644375403523.png)]
注意点：
①属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹
③JSON 中不允许使用单引号表示字符串
④JSON 中不能写注释
⑤JSON 的最外层必须是对象或数组格式
⑥不能使用 undefined 或函数作为 JSON 的值
JSON 的作用：在计算机与网络之间存储和传输数据。
JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据
与js对象的关系：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B3MxJvGW-1673160063808)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644375538737.png)]
与js对象互转：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-33YdummA-1673160063809)(C:%5CUsers%5C%E9%93%B6%E6%99%97%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1644375563870.png)]
封装Ajax函数
FormData对象管理数据
// 1. 新建 FormData 对象
var fd = new FormData()
// 2. 为 FormData 添加表单项
fd.append('uname', 'zs')
fd.append('upwd', '123456')
// 3. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与URL地址
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
// 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
xhr.send(fd)
// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault()
// 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function() {}
})
上传文件
实现步骤：
①定义 UI 结构
![]()
②验证是否选择了文件
// 1. 获取上传文件的按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮添加 click 事件监听
btnUpload.addEventListener('click', function() {
// 3. 获取到选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
// ...后续业务逻辑
})
③向 FormData 中追加文件
// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0])
④使用 xhr 发起上传文件的请求
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)
⑤监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) { // 上传文件成功
// 将服务器返回的图片地址，设置为 ![]()
标签的 src 属性
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else { // 上传文件失败
console.log(data.message)
}
}
}
完整代码
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>Documenttitle>
head>
<body>
<input type="file" id="file1" />
<button id="btnUpload">上传文件button>
<br />
<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').files
if (files.length <= 0) {
return alert('请选择要上传的文件！')
}
var fd = new FormData()
// 将用户选择的文件，添加到 FormData 中
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
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>
进度条
//导入的库
<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
//BootStrap进度条
<div class="progress" style="width: 500px; margin: 10px 0;">
<div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">
0%
</div>
</div>
// 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
// e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
var percentComplete = Math.ceil((e.loaded / e.total) * 100) //计算上传进度
}
}
//监听上传的文件
xhr.upload.onload = function() {
$('#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>Documenttitle>
<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js">script>
head>
<body>
<input type="file" id="file1" />
<button id="btnUpload">上传文件button>
<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 />
<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').files
if (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>
使用ajax上传文件
<!-- 导入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件按钮 -->
<button id="btnUpload">上传</button>
$('#btnUpload').on('click', function() {
// 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
var files = $('#file1')[0].files
// 2. 判断是否选择了文件
if (files.length <= 0) {
return alert('请选择图片后再上传！‘)
}
})
// 向 FormData 中追加文件
var fd = new FormData()
fd.append('avatar', files[0])
$.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 版本 1.8 起，该方法只能被附加到文档
$(document).ajaxStart(function() {
$('#loading').show()
})
注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。
Ajax 请求结束时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果
// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
$(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>Documenttitle>
<script src="./lib/jquery.js">script>
head>
<body>
<input type="file" id="file1" />
<button id="btnUpload">上传文件button>
<br />
<img src="./images/loading.gif" 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].files
if (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>
})
// 监听到 Ajax 完成的事件
$(document).ajaxStop(function () {
$('#loading').hide()
})
$('#btnUpload').on('click', function () {
var files = $('#file1')[0].files
if (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)
}
})
})
})