JavaScript >> Javascript 文檔 >  >> jQuery

帶有 jQuery 和 PHP 的可愛文件瀏覽器

今天我們想和你分享一個很酷的實驗。它是一個可愛的文件瀏覽器,您可以將其上傳到您網站某處的文件夾,並與全世界共享文檔、圖片和其他文件。該應用程序使用 PHP 和 jQuery 構建,並廣泛使用 CSS3 - 設計中沒有使用圖像或圖標,動畫流暢,即使在智能手機上也能正常工作。

如何在您的網站上使用它

繼續從上面的下載按鈕中獲取 zip 文件。解壓,然後上傳到你的服務器。文件夾文件 是您應該放置您希望共享的所有內容的地方。無需進一步設置 - 腳本不使用數據庫,也無需配置。

想法

如果您想了解更多關於它的工作原理,這裡是該功能的高級概述:

  • 一個 PHP 腳本 - scan.php - 掃描文件 文件夾並將所有文件和文件夾作為單個 JSON 對象返回。
  • 在 jQuery 的幫助下,我們的 JavaScript 代碼獲取這個 JSON,並將其轉換為文件和文件夾的網格。單擊文件夾會重新呈現視圖及其內容。

因為只涉及一個對後端的請求,所以瀏覽文件列表和搜索是即時的。我們還更新 URL 並使用 hashchange 事件來監控使用後退/前進按鈕的導航。

我們邀請您一起玩代碼 - 它有很多評論並且相對容易理解。

強製文件下載

瀏覽器打開文本文件而不是下載它們。如果您希望強制下載所有文件,請將這個 .htaccess 文件放在 files 中 文件夾:

<Files *.*>
ForceType application/octet-stream
</Files>

它應該被稱為 .htaccess (帶有前導點)。此文件僅在 Apache Web 服務器上受支持。

設計

我們所有的時事通訊訂閱者都可以免費獲得該設計的 PSD!從這裡加入或登錄以下載它。

我們希望您發現我們的文件管理器很有用!可以添加很多很酷的東西,比如在燈箱中瀏覽照片,播放音頻和視頻,甚至通過文件管理功能和上傳來增強它。我們很想看看你的想法!


Tutorial JavaScript 教程
  1. 學習語言的困難

  2. 10 個最佳 jQuery 表單插件

  3. 第一個基於 API 的前端項目 - Find Movies App

  4. 帶有瀏覽器窗口的 F​​lappy Bird

  5. 在 React 中緩存組件數據

  6. 如何在 NUXT 中分離 DEV 和 PROD Firebase 項目🔥

  7. 使用 React Context 和 refs 重做搜索 UI

  1. 你的 VS 代碼擴展慢嗎?這是如何加快速度!

  2. Javascript在初始化之前無法訪問類

  3. 插入 DOM 後 livequery 不綁定

  4. 使用 Element UI 設置 Vue3

  5. 為什麼有尊嚴的原始人討厭聖誕節後的那一天?

  6. 新來了!🙌

  7. 以編程方式創建 Vue.js 組件實例

  1. 使用 GraphQL 的超強 API

  2. 將 HTTP 請求從 Chrome/Edge DevTools 複製到 PowerShell/cURL/Fetch

  3. 🔥🎉🔥🔨🔥❤️🔥🔨🔥🎉🔥 我的 GitHub 個人資料自述文件🔥🎉🔥🔨🔥❤️🔥🔨🔥🎉🔥

  4. 星期一模塊:輪播幻燈片、粘滯頁腳、電話覆蓋等