Hello, Flask!
首发于Hello, Flask!
Flask文件上传(五):拖拽上传和进度条

Flask文件上传(五):拖拽上传和进度条

现在,一切都还很简陋。为了让上传功能更加美观和易用,需要增加一些辅助的功能,比如上传进度条,拖拽上传,显示缩略图预览,显示文件信息。如果自己实现这些需要很多时间和精力,我们可以借助一些插件和库实现。

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 PIL
from PIL import Image

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

上面的函数把图片转换成定宽80的缩略图,然后保存到相应的文件夹。



Plupload

plupload.com/

Plupload同样支持拖拽上传,文件管理等功能。而且可以在客户端缩小图片,比如生成缩略图作为头像,有多种主题可选。


找到一个集成了Plupload的Flask扩展,不过并没有测试,而且没有文档。如果不好用可以自己尝试写一个。



相关链接



- - - - -

更多关于Flask和Web开发的原创内容,欢迎关注知乎专栏 - Hello, Flask!

文章被以下专栏收录

    大家好,我是李辉,一个Python程序员。在这个专栏,你会看到我学习和使用Flask的经验和总结,你还会看到我所有的发明创造,以及它们的实现方法。欢迎加入这场Flask之旅,拿好你的小键盘,上车吧!helloflask.com