使用 javascript 上傳圖片的方法：1. 創(chuàng)建表單并添加文件輸入元素；2. 偵聽文件選擇事件；3. 獲取文件對象；4. 創(chuàng)建 formdata 對象并添加文件；5. 創(chuàng)建 xmlhttprequest 對象；6. 配置請求；7. 打開請求；8. 發(fā)送請求；9. 偵聽響應；10. 處理響應。
如何使用 JavaScript 上傳圖片
簡介：
JavaScript 是一種流行的客戶端腳本語言，它允許開發(fā)人員創(chuàng)建交互式和動態(tài)的網(wǎng)頁。其中一項重要功能是上傳圖片的能力，本文將介紹如何使用 JavaScript 上傳圖片。
方法：
1. 創(chuàng)建一個表單：
創(chuàng)建一個 HTML 表單，其中包含一個文件輸入元素 ()，用于選擇要上傳的圖片。
2. 偵聽文件選擇事件：
在文件輸入元素上添加一個 change 事件偵聽器，當用戶選擇一個文件時觸發(fā)。
3. 獲取文件對象：
在事件處理程序中，從事件目標 (e.target) 中獲取已選擇的文件對象。
4. 創(chuàng)建 FormData 對象：
創(chuàng)建一個 FormData 對象，它是一個用于表示表單數(shù)據(jù)的對象。將文件對象添加到 FormData 對象中。
5. 創(chuàng)建 XMLHttpRequest 對象：
創(chuàng)建一個 XMLHttpRequest 對象，它用于與服務器進行 HTTP 請求。
6. 配置請求：
將請求方法設置為 POST，因為它用于提交表單數(shù)據(jù)。將 enctype 屬性設置為 multipart/form-data，因為文件上傳需要使用此編碼類型。
7. 打開請求：
使用 open() 方法打開請求，指定請求的端點和請求方法。
8. 發(fā)送請求：
使用 send() 方法發(fā)送 FormData 對象作為請求正文。
9. 偵聽響應：
在 XMLHttpRequest 對象上添加一個 load 事件偵聽器，當服務器響應時觸發(fā)。
10. 處理響應：
在事件處理程序中，從響應中提取數(shù)據(jù)并對其進行處理。通常，服務器會返回有關上傳狀態(tài)和圖片存儲位置的響應。
代碼示例：
const form = document.querySelector('form');
form.addEventListener('change', (e) => {
const file = e.target.files[0];
const formData = new FormData();
formData.append('image', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onload = () => {
// 處理服務器響應
};
xhr.send(formData);
});
登錄后復制
