使用JavaScript函數實作檔案上傳下載

使用JavaScript函數實作檔案上傳和下載

隨著網路的發展和普及，檔案上傳和下載成為了網頁應用中常見的功能之一。本文將介紹如何使用JavaScript函數來實作檔案上傳和下載的功能，並提供具體的程式碼範例。

1. 檔案上傳

檔案上傳指的是將本機的檔案經由網頁上傳到伺服器。 HTML5中提供了File API用於處理文件的選擇和上傳。我們可以利用File API中的FileReader物件來讀取檔案內容，並透過XMLHttpRequest物件將檔案傳送到伺服器。

下面是一個實作檔案上傳的JavaScript函數程式碼範例：

function uploadFile() { var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { alert('文件上传成功'); } }; xhr.send(formData); }

在上面的程式碼中，我們先取得檔案選擇框的DOM對象，然後取出選取的檔案。接下來，建立一個FormData對象，並將選取的檔案新增至FormData。然後，建立一個XMLHttpRequest對象，並使用open()方法指定上傳的URL和請求方式。透過onreadystatechange事件監聽XMLHttpRequest的狀態變化，當狀態為4且狀態碼為200時，表示檔案上傳成功。最後，呼叫send()方法將FormData傳送到伺服器。

2. 檔案下載

檔案下載指的是從伺服器下載檔案到本機。 JavaScript中可以透過建立一個具有檔案下載連結的元素，並模擬點擊來實現檔案下載。

function downloadFile() { var xhr = new XMLHttpRequest(); xhr.open('GET', '/download', true); xhr.responseType = 'blob'; xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var blob = xhr.response; var link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'file.txt'; link.click(); } }; xhr.send(); }

上面的程式碼中，我們先建立一個XMLHttpRequest對象，並使用open()方法指定下載的URL和請求方式為GET。設定responseType為'blob'，以便以二進位資料的形式接收檔案。透過onreadystatechange事件監聽XMLHttpRequest的狀態變化，當狀態為4且狀態碼為200時，表示檔案下載成功。然後，透過建立一個元素，將回應的blob物件轉為URL，並將URL賦值給元素的href屬性。將檔案名稱設定為'downloaded.txt'。最後，模擬點擊元素來觸發檔案下載。

綜上所述，透過使用JavaScript函數，我們可以輕鬆實現檔案上傳和下載的功能。透過File API和XMLHttpRequest對象，我們可以對檔案進行讀取和傳送。透過建立元素並模擬點擊，我們可以實現檔案的下載。在實際應用中，我們可以根據具體的需求對這些功能進行擴展和最佳化。