1,Docker镜像

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

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

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

  • 运行起来:
    1
    $ 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,请求到服务器端的文件上传接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- 导入modal -->
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div style="margin-top:10%;">
<div class="modal-dialog" style="min-width:600px;width:60%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h2 class="modal-title" id="myModalLabel" style="font-size:18px;">
数据导入
</h2>
</div>
<div class="modal-body" id="upLoad">
<ul id="labUl" class="labelUl" style="float:none;">
<li id="basicInfotab" class="Active2"><span>基本信息</span></li>
<li id="netDatatab"><span>净值数据</span></li>
<li id="positionDatatab"><span>持仓数据</span></li>
</ul>
<div id="basicInfoDiv" class="uploadDiv">
<iframe scrolling="yes" src="http://localhost:8010/" class="fileUpload">
</iframe>
</div>
<div id="netDataDiv" class="uploadDiv" style="display:none;">
<iframe scrolling="yes" src="http://localhost:8011/" class="fileUpload">
</iframe>
</div>
<div id="positionDataDiv" class="uploadDiv" style="display:none;">
<iframe scrolling="yes" src="http://localhost:8012/" class="fileUpload">
</iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="easy1Btn" id="buttonImportAndCalc">导入&计算
</button>
<!-- <button type="button" id="fileUpload" class="easy2Btn">上传
</button> -->
<button type="button" class="easy1Btn" data-dismiss="modal">关闭
</button>
</div>
<div id="layer"></div>
<div id="onLoad"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->

4,服务器端配置

4.1,Dockerfile文件

位置: ./FileUpload/Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
# Version 0.1
# 基础镜像
FROM yaasita/docker-jquery-file-upload
# 维护者信息
MAINTAINER cbbing@163.com
# 镜像命令
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目录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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"

目录结构:

1
2
3
4
- docker-compose.yml
- FileUpload/
---- Dockerfile
---- index.html

4.3 运行

1
$ docker-compose up --build

参考

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