<body>
? ? <input type="file" name="" id="fileId" onchange="changeFn()">
? ? <script>
? ? ? ? function changeFn() {
? ? ? ? ? ? /* 獲取文件域元素 */
? ? ? ? ? ? let fileDOM = document.getElementById('fileId');
? ? ? ? ? ? /* 打印出 文件域中具體傳入的文件 */
? ? ? ? ? ? console.log(fileDOM.files[0])
? ? ? ? ? ? /* 實例化一個表單對象 */
? ? ? ? ? ? let formdata = new FormData();
? ? ? ? ? ? /* 使用append方法伦糯，添加一個name叫file的文件 */
? ? ? ? ? ? /* name具體叫什么擅编，是由后端的接口文檔提供的 */
? ? ? ? ? ? formdata.append('file', fileDOM.files[0]);
? ? ? ? ? ? /* 創(chuàng)建一個xhr對象 */
? ? ? ? ? ? let xhr = new XMLHttpRequest();
? ? ? ? ? ? /* 參照接口文檔使用post請求，采用異步的方式 */
? ? ? ? ? ? xhr.open('post', 'https://虎谢。恋腕。歼捏。', false)
? ? ? ? ? ? /* 設(shè)置請求頭处嫌，名字叫Authorization啥寇，值是token值 */
? ? ? ? ? ? xhr.setRequestHeader('Authorization', 'Bearer偎球。。辑甜。')
? ? ? ? ? ? /* 使用onreadystatechange去監(jiān)聽數(shù)據(jù)的返回衰絮，如果狀態(tài)為4，表示請求已完成
? ? ? ? ? ? 已完成就打印相關(guān)的數(shù)據(jù) */
? ? ? ? ? ? xhr.onreadystatechange = function () {
? ? ? ? ? ? ? ? if (xhr.readyState == 4) {
? ? ? ? ? ? ? ? ? ? /*? console.log(JSON.parse(xhr.responseText)); */
? ? ? ? ? ? ? ? ? ? let { meta } = JSON.parse(xhr.responseText);
? ? ? ? ? ? ? ? ? ? /* 狀態(tài)碼為200 表示請求成功 */
? ? ? ? ? ? ? ? ? ? if (meta.status == 200) {
? ? ? ? ? ? ? ? ? ? ? ? alert(meta.msg)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? /* 把添加完文件的表單對象傳給服務(wù)端 */
? ? ? ? ? ? xhr.send(formdata)
? ? ? ? }
? ? </script>
</body>
