使用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中可以透過建立一個具有檔案下載連結的<a></a>元素，並模擬點擊來實現檔案下載。

下面是一個實作檔案下載的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時，表示檔案下載成功。然後，透過建立一個<a></a>元素，將回應的blob物件轉為URL，並將URL賦值給<a></a>元素的href屬性。將檔案名稱設定為'downloaded.txt'。最後，模擬點擊<a></a>元素來觸發檔案下載。

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

以上是使用JavaScript函數實作檔案上傳下載的詳細內容。更多資訊請關注PHP中文網其他相關文章！