標籤：

Flask文件上傳（五）：拖拽上傳和進度條

01-27
現在，一切都還很簡陋。為了讓上傳功能更加美觀和易用，需要增加一些輔助的功能，比如上傳進度條，拖拽上傳，顯示縮略圖預覽，顯示文件信息。如果自己實現這些需要很多時間和精力，我們可以藉助一些插件和庫實現。

Flask文件上傳系列目錄

Flask文件上傳（一）：原生實現

Flask文件上傳（二）：使用擴展實現

Flask文件上傳（三）：完整實現

Flask文件上傳（四）：文件管理與多文件上傳Flask文件上傳（五）：拖拽上傳和進度條

Dropzone.js

dropzonejs.com/

Dropzone.js比較輕量，自定義選項很豐富，而且不依賴其他外部庫。載入相應文件後，你只需要創建一個類的值為dropzone的表單就可以了。一個簡單的使用Flask和Dropzone上傳文件的例子在這裡：

helloflask - flask-upload-dropzone

另外，為了方便集成Dropzone，我寫了一個擴展：Flask-Dropzone

jQuery File Upload

blueimp.github.io/jQuer

jQuery File Upload是比較流行的上傳插件，基本實現了所有常用的功能。藉助我們之前學習的內容，可以基於它實現一個Flask版本。

這裡有一個Flask版本：greyli/flask-file-uploader

這裡使用Pillow來處理圖像生成縮略圖：

import PILnfrom PIL import Imagenndef create_thumbnail(image):n base_width = 80n img = Image.open(os.path.join(app.config[UPLOAD_FOLDER], image))n w_percent = (base_width / float(img.size[0]))n h_size = int((float(img.size[1]) * float(w_percent)))n img = img.resize((base_width, h_size), PIL.Image.ANTIALIAS)n img.save(os.path.join(app.config[THUMBNAIL_FOLDER], image))n

上面的函數把圖片轉換成定寬80的縮略圖，然後保存到相應的文件夾。

Plupload

plupload.com/

Plupload同樣支持拖拽上傳，文件管理等功能。而且可以在客戶端縮小圖片，比如生成縮略圖作為頭像，有多種主題可選。

找到一個集成了Plupload的Flask擴展，不過並沒有測試，而且沒有文檔。如果不好用可以自己嘗試寫一個。

相關鏈接

  • Dropzone.js：dropzonejs.com/
  • 使用Flask和Dropzone.js上傳的示常式序：github.com/helloflask/f
  • jQuery-File-Upload源碼：blueimp/jQuery-File-Upload

  • Flask版本的jQuery-File-Upload：greyli/flask-file-uploader

  • Plupload源碼：github.com/moxiecode/pl
  • 集成Plupload的Flask擴展：ryanolson/flask-plupload

- - - - -

更多關於Flask和Web開發的原創內容，歡迎關注知乎專欄 - Hello, Flask!。


推薦閱讀：

TAG:Flask | 文件上传 | Python |