学php网站开发,wordpress 询盘,比较好网站设计公司,wordpress 无法在线升级图片上传
传图片文件不能像传文字一样用JSON格式#xff0c;可以用form-data类型携带文件
1.获取图片文件对象
2.使用FormData#xff08;浏览器内置的构造函数#xff09;携带图片文件
3.提交表单数据到服务器#xff0c;返回图片网址 这里可能用到的事件监听器#…图片上传
传图片文件不能像传文字一样用JSON格式可以用form-data类型携带文件
1.获取图片文件对象
2.使用FormData浏览器内置的构造函数携带图片文件
3.提交表单数据到服务器返回图片网址 这里可能用到的事件监听器
change 事件通常用于在 HTML 表单元素的值改变时触发某些操作。最常见的应用场景是 input,textarea和 select 元素。当用户与这些元素交互并且它们的值发生改变后如果元素失去焦点例如用户点击了页面的其他部分或者按下了 Tab 键就会触发 change 事件。
表单可以存储文件数据。为了实现这一目标需要在HTML的form标签中添加enctypemultipart/form-data属性。这种编码类型允许表单发送二进制数据包括文件内容。当用户选择文件并提交表单时文件数据会被包含在表单的POST请求中并发送到服务器。服务器端的代码可以解析这个请求提取出文件数据并将其存储在服务器上。 bodyinput classupload typefile//选择的文件保存到了文件选择元素里img src altscript src../form-serialize.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript src../bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js/scriptscriptconst upload document.querySelector(.upload)upload.addEventListener(change, e {const f_d new FormData()f_d.append(img, e.target.files[0])axios({url: http://hmajax.itheima.net/api/uploadimg,method: post,data: f_d}).then(result {
document.querySelector(img).srcresult.data.data.url})})/script
/body 信息设置
提示框
好像bootstrap的提示框都是构造函数初始化 用show()显示 stylebody {background-color: #f0f2f5;padding: 20px;-moz-user-select: none;/*火狐*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select: none;/*IE10*/-khtml-user-select: none;/*早期浏览器*/user-select: none;font-size: 14px;}.container {background-color: #ffffff;padding: 20px;display: flex;padding-left: 0;margin: 0 auto;min-width: 700px;max-width: 1000px;border-radius: 2px;}.my-nav {width: 200px;border-right: 1px solid #f0f0f0;list-style: none;}.my-nav li {cursor: pointer;height: 40px;line-height: 40px;padding-left: 20px;font-size: 14px;}.my-nav li.active {background-color: #e9f7fe;color: #448ef7;border-right: 4px solid #448ef7;font-weight: 600;}.content {padding-top: 10px;/* padding-left: 40px; */flex: 1;display: flex;justify-content: space-evenly;}.content .title {font-size: 20px;margin-bottom: 30px;}/*.content .info-wrap {margin-right: 20px; }*/.content .avatar-box {display: flex;flex-direction: column;align-items: center;padding-top: 20px;/* flex: 1; */padding-top: 55px;width: 200px;}.content .avatar-box .avatar-title {font-size: 16px;text-align: left;align-self: flex-start;margin: 0;}.content .avatar-box .prew {width: 120px;height: 120px;border-radius: 50%;margin-bottom: 15px;}.content .avatar-box label {width: 100px;height: 30px;transition: all .3s;box-shadow: 0 2px 0 rgb(0 0 0 / 2%);cursor: pointer;font-size: 14px;border-radius: 2px;color: rgba(0, 0, 0, .85);border: 1px solid #d9d9d9;text-align: center;line-height: 30px;}.content .avatar-box label:hover {color: #40a9ff;border-color: #40a9ff;background: #fff;}.content .avatar-box #upload {display: none;}.content .user_form label:not(.male-label) {display: block;margin-bottom: 15px;margin-top: 15px;}.content .user_form .form-item {margin-bottom: 20px;}.content .user_form .form-item .male-label {margin-right: 20px;display: inline-flex;align-items: center;}.content .user_form input[typeradio] {margin-right: 10px;outline: none;background-size: contain;border: 1px solid rgba(0, 0, 0, .25);border-radius: 50%;box-sizing: border-box;width: 16px;height: 16px;appearance: none;}.content .user_form input[typeradio]:checked {border-radius: 50%;border-color: #0d6efd;background-color: #0d6efd;background-image: url(data:image/svgxml,%3csvg xmlnshttp://www.w3.org/2000/svg viewBox-4 -4 8 8%3e%3ccircle r2 fill%23fff/%3e%3c/svg%3e);}.content .user_form input:not([typeradio]) {height: 30px;appearance: none;}.form-item input:not([typeradio]),textarea {display: block;width: 330px;outline: none;font-size: 14px;border: 1px solid #d9d9d9;border-radius: 2px;transition: all .3s;padding-left: 5px;}.content .user_form textarea {padding-top: 10px;width: 350px;resize: none;}.content .user_form input:focus,textarea:focus {border-color: #40a9ff;border-right-width: 1px;z-index: 1;border-color: #40a9ff;box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);border-right-width: 1px;outline: 0;}.content .user_form button.submit {background: #4D8FF7;width: 78px;height: 32px;color: white;text-align: center;line-height: 32px;font-size: 14px;color: #FFFFFF;letter-spacing: 0;font-weight: 500;border: none;cursor: pointer;}.toast {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);}.toast .toast-body {padding: 0 !important;}.toast .alert-success {margin-bottom: 0 !important;}/style/headbody!-- toast 提示框 --div classtoast my_toast data-bs-delay1500div classtoast-bodydiv classalert alert-success info-box操作成功/div/div/div!-- 核心内容区域 --div classcontainerul classmy-navli classactive基本设置/lili安全设置/lili账号绑定/lili新消息通知/li/uldiv classcontentdiv classinfo-wraph3 classtitle基本设置/h3form classuser_form actionjavascript:;div classform-itemlabel foremail邮箱/labelinput idemail nameemail classemail typetext placeholder请输入邮箱 autocompleteoff/divdiv classform-itemlabel fornickname昵称/labelinput idnickname namenickname classnickname typetext placeholder请输入昵称 autocompleteoff/divdiv classform-itemlabel性别/labellabel classmale-labelinput typeradio namegender classgender value0男/labellabel classmale-labelinput typeradio namegender classgender value1女/label/divdiv classform-itemlabel fordesc个人简介/labeltextarea iddesc namedesc classdesc placeholder请输入个人简介 cols20 rows10autocompleteoff/textarea/divbutton classsubmit提交/button/form/divdiv classavatar-boxh4 classavatar-title头像/h3img classprew src../img/头像.png altlabel forupload更换头像/labelinput idupload typefile classupload/div/div/divscript src../form-serialize.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript src../bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js/scriptscriptconst user_form document.querySelector(.user_form)axios({ //渲染页面url: http://hmajax.itheima.net/api/settings,params: {creator: wwx}}).then(result {const obj result.data.datafor (let key in obj) {if (key avatar) {document.querySelector(.prew).src obj[key]}else if (key gender) {const gender document.querySelectorAll(.gender)gender[obj[key]].checked true} else {document.querySelector(.${key}).value obj[key]}}})const upload document.querySelector(.upload)upload.addEventListener(change, e {const fd new FormData()fd.append(avatar, e.target.files[0])fd.append(creator, wwx)axios({url: http://hmajax.itheima.net/api/avatar,method: put,data: fd}).then(result {document.querySelector(.prew).src result.data.data.avatar})})document.querySelector(.submit).addEventListener(click, () {//修改const obj serialize(user_form, { hash: true, empty: true })obj.gender obj.genderobj.creator wwxaxios({url: http://hmajax.itheima.net/api/settings,method: put,data: obj}).then(result {const my_toast document.querySelector(.my_toast)const toastnew bootstrap.Toast(my_toast)toast.show()})})/script
/bodyXMLhttprequestXHR
该对象用于与服务器交互。
axios对XHR封装其内部就是采用XHR与服务器交互 查询参数
http://xxx.com/xxx/xxx?参数名1值1参数名2值
可以自动生成字符串 promise
用于表示一个异步操作的最终完成及其结果值
promise的三种状态
待定pending初始状态即没有被兑现也没有被拒绝
已兑现fulfilled操作成功完成
以拒绝rejected操作失败 有了Promise对象就可以把异步操作以同步操作的流程表达出来避免了层层嵌套的回调函数。此外Promise对象提供了统一的接口使得控制异步操作更加容易。Promise通过将异步操作的结果封装在一个对象中使得我们可以更加清晰和简洁地处理异步操作。
异步任务有结果后与处理函数相关联
// 假设 fetchData 是一个返回 Promise 的函数
function fetchData(url) { return new Promise((resolve, reject) { // 模拟异步操作 setTimeout(() { const data Data from ${url}; resolve(data); }, 1000); });
} // 使用 Promise 链式调用
fetchData(https://example.com/api/data1) .then(data1 { console.log(data1); return fetchData(https://example.com/api/data2); // 返回新的 Promise }) .then(data2 { console.log(data2); // 可以继续添加更多的异步操作... }) .catch(error { console.error(An error occurred:, error); });
不用过渡嵌套返回信息 运用promise和xhr封装axios function myaxios(obj) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest()xhr.open(obj.method || get, obj.url)if (obj.params) {const paramsobj new URLSearchParams(obj.params)const parame_string paramsobj.toString()obj.url ?${parame_string}}xhr.addEventListener(loadend, () {if (xhr.status 200 xhr.status 300)resolve(JSON.parse(xhr.response))elsereject(new Error(xhr.response))})if (obj.data) {xhr.setRequestHeader(Content-Type, application/json)//设置请求头const data_srting JSON.stringify(obj.data)xhr.send(data_srting)//发送请求体} else {xhr.send()}})}同步代码与异步代码
同步代码
代码按顺序一行一行执行上一行执行完才会执行下一行 异步代码
耗时不必等待任务完成异步代码完成后会用回调函数回传 Promise-链式调用
依靠then()方法返回一个新生成的promise对象特性继续串联下一个任务直到结束 创建的promise方法调用then方法then具有回调函数return的结果可以传递给then产生的新promise对象
我们可以使用then函数返回的新promise对象特征一直串联解决函数嵌套 async与await-异步编程终极解决方案
基于promise而无需调用
用async声明该函数为异步函数在函数内使用await获取promise对象成功状态结果值 事件循环
执行代码和收集异步任务的模型在调用栈空闲时反复调用任务队列里回调函数的机制 js执行同步代码遇到异步代码交给宿主浏览器环境运行 宏任务与微任务 宏任务由浏览器环境执行的异步代码
任务执行所在代码js脚本执行事件浏览器定时器浏览器Ajax请求的完成事件浏览器用户交互事件浏览器 微任务由js引擎环境执行的异步代码
promise.then()
promise本身是同步的而then和catch回调函数是异步的 promise.all
合并多个promise对象等待所有同时成功完成或有一个失败做后续逻辑
const pPromise.all([Promise对象,Promise对象,Promise对象...])
p.then(result {//result结果[Promise成功结果Promise成功结果Promise成功结果...]
}).catch(error {//第一个失败的Promise对象抛出的异常
})
