图片上传的基本思想大概是这样，前端用一个表单中type为file的input标签作为图片上传的前台发起上传，并以ajax把整个表单发送到后台，后台则是接收到图对象，加以处理，保存到服务器指定目录即可。首先先介绍下前台的代码，以及上传文件的form表单。

form表单如下：

其中的config 如下：

其中的label为如下：

后台的视图函数则是实例化该ImgForm，传到前台，前台的html代码为：

hidden_tag()一定不要漏掉，不然后台将无法获取到我们传到后台的数据。js代码如下：

其中的imgform.append，则是给form对象添加我们想要传到后台的数据，比如你要传一个name为MuMu的数据到后台就可以这么写：

flask后台接口：

其中set_size函数为图片处理函数，如下：

图片的保存到制定目录跟单张的一样，唯一区别在于，批量上传是以压缩文件的形式上传，思路是先上传到制定目录，然后解压出来，再把里面的图片保存到制定目录，最后再移除压缩文件与解压出来的文件。前台代码跟上面的上传图片类似，就不再重复介绍。主要介绍一下上传压缩文件后的从图片图片处理过程。假设现在已经上传了压缩文件。后台处理接口如下：

其中un_zip、un_tar解压函数以及文件移除函数如下，需要注意的是移除单个文件只需要remove即可，而如果想移除一个文件夹则需要用rmtree方法才能移除，详情如下：

其中的get_line函数则是一个操作txt文件的函数，我们事先把图片名放在txt中，上传一张图片就从文件中提取出一行图片名，并删除一行，若删除图片则写回txt中，这是个一个良好的解决命名冲突的问题。代码如下：

我是采用h5中a标签的新属性，即a标签中的href为图片的绝对路径，增加一个download属性即为图片下载，且download值则是下载后图片的名称。（有一个不足即使兼容性不怎么好，目前仅支持谷歌浏览器以及火狐浏览器），例子如下：

批量下载的本质也是跟单张的一样，只不过要点击批量下载，要用js遍历模拟点击a标签实现多张下载，js如下：

如果想实现多文件同时上传（例如：csv、xlsx、xls等），前端的表单需要加个属性：enctype="multipart/form-data"才能实现文件多选，且选择多文件上传的时候需要按住ctrl,按住shift则是把点选当前的文件以及前面的文件全部选定，然后点击打开即可完成文件选定。前端代码如下：

其中引用到的宏模板如下：