如何使用MySQL和JavaScript實作一個簡單的檔案瀏覽功能

如何使用MySQL和JavaScript實作一個簡單的檔案瀏覽功能

#引言：
在當今數位化時代，檔案管理和瀏覽功能成為我們日常工作中不可或缺的一部分。本文將介紹如何使用MySQL和JavaScript實作一個簡單的檔案瀏覽功能。我們將使用MySQL作為資料庫來儲存檔案的元數據，使用JavaScript來實現使用者介面和檔案操作。

1. 建立資料庫表
   首先，我們需要建立一個MySQL資料庫表來儲存檔案的元資料。我們可以建立一個名為"files"的表，包含以下列：id（檔案ID，自增主鍵）、name（檔案名稱）、size（檔案大小）和path（檔案路徑）。可以使用以下SQL語句建立表格：

CREATE TABLE files (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255),
size INT,
path VARCHAR (255)
);

2. 上傳檔案到伺服器
   使用者可以透過一個檔案上傳表單將檔案上傳到伺服器。當使用者選擇檔案後，透過JavaScript取得檔案對象，並使用XMLHttpRequest對象將檔案傳送到伺服器。伺服器接收到檔案後，將檔案儲存在指定的目錄，並將檔案的元資料（檔案名稱、大小和路徑）插入MySQL資料庫。以下是一個簡單的JavaScript上傳檔案的範例：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
   const selectedFile = event.target.files[0];
   const xhr = new XMLHttpRequest();
   xhr.open('POST', '/upload');
   xhr.send(selectedFile);
});

3. 查詢檔案列表
   為了實作檔案瀏覽功能，我們需要從MySQL資料庫中查詢檔案列表，並在使用者介面中展示。可以使用Node.js作為伺服器端的開發環境，透過使用MySQL的Node.js驅動程式來執行查詢操作。在伺服器端，可以編寫一個API來處理文件清單查詢請求，並將查詢結果以JSON格式傳回給客戶端。以下是使用Node.js和Express框架的範例：

const express = require('express');
const mysql = require('mysql');

const app = express();
const connection = mysql.createConnection({
   host: 'localhost',
   user: 'root',
   password: 'password',
   database: 'files'
});

app.get('/files', (req, res) => {
   connection.query('SELECT * FROM files', (error, results) => {
      if (error) throw error;
      res.json(results);
   });
});

app.listen(3000, () => {
   console.log('Server is running on port 3000');
});

4. 顯示檔案列表
   在前端，我們可以使用JavaScript透過AJAX從伺服器取得檔案列表，並將其展示在使用者介面中。可以使用以下程式碼範例：

fetch('/files')
   .then(response => response.json())
   .then(data => {
      const fileList = document.getElementById('fileList');
      data.forEach(file => {
         const listItem = document.createElement('li');
         listItem.textContent = file.name;
         fileList.appendChild(listItem);
      });
   });

透過上述步驟，我們可以實作一個簡單的檔案瀏覽功能。使用者可以上傳文件，並在介面中看到上傳的文件清單。當然，這只是一個基礎範例，我們可以根據自己的需求擴展和優化該功能，例如添加檔案的刪除和下載功能等。

結論：
使用MySQL和JavaScript可以輕鬆實作一個簡單的檔案瀏覽功能。透過MySQL儲存檔案的元數據，並使用JavaScript控制檔案的上傳、查詢和展示，我們可以快速建立一個檔案管理和瀏覽的介面。當然，根據實際需求，我們可以進一步擴展和優化該功能，增加更多的文件操作功能。

以上是如何使用MySQL和JavaScript實作一個簡單的檔案瀏覽功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！