AJAX实现图片文件上传
生活随笔
收集整理的這篇文章主要介紹了
AJAX实现图片文件上传
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.文件上傳流程
1）客戶端將文件數(shù)據(jù)發(fā)送給服務器
2）服務器保存上傳的文件數(shù)據(jù)到服務器端
3）服務器響應給客戶端一個文件訪問地址
2.與服務器端的約定
1）鍵的名稱（表單域名稱）：imagefile
2）請求方法：POST
３）請求的表單格式：multiparty/form-data
4）請求體中必須包含一個鍵值對，鍵的名稱是服務器要求的名稱，值是文件數(shù)據(jù)
【注】HTML5中，JS仍然無法隨意獲取文件數(shù)據(jù)，但是可以獲取到input元素中，被用戶選中的文件數(shù)據(jù)
【注】可以利用HTML5提供的FormData構造函數(shù)來構造請求體
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><img src="" alt="" id="imgAvatar"><input type="file" id="avatar"><button>上傳</button><script>async function upload() {//獲取表單信息const inp = document.getElementById('avatar');//判斷是否已選擇上傳文件if (inp.files === 0) {alert("請選擇要上傳的文件");return;}const formData = new FormData(); //構建請求體formData.append("imagefile", inp.files[0]); //添加鍵值對const url = "http://101.132.72.36:5100/api/upload";const resp = await fetch(url, {method: "POST",body: formData});const result = await resp.json();return result}document.querySelector("button").onclick = async function () {const result = await upload();const img = document.getElementById("imgAvatar");img.src = result.path;}</script> </body></html>?
總結
以上是生活随笔為你收集整理的AJAX实现图片文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Matlab的数组的小知识和方法
- 下一篇： 可迭代协议与for-of循环