開源項目精選: 絲般順滑的文件上傳控制項 Filepond

簡介:

Filepond是一個可以方便地上傳文件的JavaScript庫,只需把要上傳的文件拖拽到控制項上即可上傳,同時優化圖像提升圖像上傳速度。而且Filepond也提供出色,流暢的用戶體驗。

開源項目精選: 絲般順滑的文件上傳控制項 Filepond

特點和優勢:

1. 多文件上傳

通過添加multiple屬性,可以創建多文件的放置區域。data-max-files屬性來限制文件的最大數量。同時放置一個圖像,FilePond可以提供快速預覽,同時顯示上傳圖像的大小。也可以使用API添加文件或者複製和粘貼文件。

2. 接受多種上傳輸入格式

接受目錄,文件,blob,本地URL,遠程URL和數據URI等輸入方式。

3. 圖像優化

網頁上上傳的最多的恐怕就是圖片,圖片上傳也是前端開發者比較看重的方面,而Filepond在客戶端可以自動調整大小和裁剪圖像,不僅可以節省伺服器寬頻,而且可以顯著提高上傳速度。

4. 響應式布局

目前大多數JavaScript庫都具有良好的響應式布局,因為越來越多的人都在用移動設備瀏覽網頁。FilePond也具有良好的響應式布局。可以自動縮放到可用空間。桌面設備和移動設備都可以愉快適應。

5. 支持非同步或同步上傳

接受目錄,文件,blob,本地URL,遠程URL和數據URI。

……

更多可以進入官網了解:https://pqina.nl/filepond/

快速使用

創建一個上傳框

這樣會將<input>標籤設置為上傳框

開源項目精選: 絲般順滑的文件上傳控制項 Filepond

這時就可以將想要上傳的文件拖入框中

開源項目精選: 絲般順滑的文件上傳控制項 Filepond

完成上一步後,還需要指定上傳文件存儲的位置,設置FilePond 的sever屬性,如

做好相關的配置後就可以上傳文件了。