采用Docker集成jquery-file-upload组件到WEB应用

1，Docker镜像

jQuery-File-Upload 组件是一个非常好用的文件上传组件，有很多友好的特性：

• 支持文件多选
• 拖拽上传
• 上传进度条
• 取消上传
• 图片、音视频预览
• 纯JS和HTML5代码，不需额外安装插件

服务器端提供了三种部署方式: gae-go、gae-python和php，前两种基于gae，在国内基本被墙了，肯定用不了。php的部署用官方提供的部署方式运行不起来，从dockerhub上找到了一个可用的docker镜像:yaasita/docker-jquery-file-upload，日文？&!OMG。

• 运行起来：

$ docker run -d -p 22 -p 8033:80 yaasita/docker-jquery-file-upload /usr/bin/supervisord

跟官方给出的Demo是一样的，不过我们需要做下汉化。

2，集成

效果如下：

每个Tab标签对应的是一个地址。

3，WEB前端

html调用modal，modal部分如下，通过3个iframe，请求到服务器端的文件上传接口。

×


数据导入




基本信息
净值数据
持仓数据












导入&计算


关闭

4，服务器端配置

4.1，Dockerfile文件

位置: ./FileUpload/Dockerfile

# Version 0.1

# 基础镜像
FROM yaasita/docker-jquery-file-upload

# 维护者信息
MAINTAINER [email protected]

# 镜像命令
COPY index.html /var/www/upload/index.html

CMD ["/usr/bin/supervisord"]

其中，Dockerfile中的index.html文件，是为了汉化docker镜像中的index文件。

4.2，docker-compose.yml

docker-compose中配置了3个容器，对外提供文件上传接口，分别对应服务器的info, nav, pos目录。

version: '2'
services:

  fileupload1:
    build: ./FileUpload
    ports:
      - 8010:80
      - 22
    volumes:
      - /usr/local/upload/info:/var/www/upload/server/php/files
    restart: "always"

  fileupload2:
    build: ./FileUpload
    ports:
      - 8011:80
      - 22
    volumes:
      - /usr/local/upload/nav:/var/www/upload/server/php/files 
    restart: "always"

  fileupload3:
    build: ./FileUpload
    ports:
      - 8012:80
      - 22
    volumes:
      - /usr/local/upload/pos:/var/www/upload/server/php/files
    restart: "always"

目录结构：

- docker-compose.yml
- FileUpload/
---- Dockerfile
---- index.html

4.3 运行

$ docker-compose up --build

参考

https://github.com/blueimp/jQuery-File-Upload

原文地址：http://kekefund.com/2017/06/15/jquery-file-upload-docker/