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

内容简介：采用Docker集成jquery-file-upload组件到WEB应用

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
  

2，集成

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

3，WEB前端

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

<!-- 导入modal -->
<divclass="modal fade"id="importModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<divstyle="margin-top:10%;">
<divclass="modal-dialog"style="min-width:600px;width:60%;">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">
×
</button>
<h2class="modal-title"id="myModalLabel"style="font-size:18px;">
数据导入
</h2>
</div>
<divclass="modal-body"id="upLoad">
<ulid="labUl"class="labelUl"style="float:none;">
<liid="basicInfotab"class="Active2"><span>基本信息</span></li>
<liid="netDatatab"><span>净值数据</span></li>
<liid="positionDatatab"><span>持仓数据</span></li>
</ul>
<divid="basicInfoDiv"class="uploadDiv">
<iframescrolling="yes"src="http://localhost:8010/"class="fileUpload">
</iframe>
</div>
<divid="netDataDiv"class="uploadDiv"style="display:none;">
<iframescrolling="yes"src="http://localhost:8011/"class="fileUpload">
</iframe>
</div>
<divid="positionDataDiv"class="uploadDiv"style="display:none;">
<iframescrolling="yes"src="http://localhost:8012/"class="fileUpload">
</iframe>
</div>
</div>
<divclass="modal-footer">
<buttontype="button"class="easy1Btn"id="buttonImportAndCalc">导入&计算
</button>
<!-- <button type="button" id="fileUpload" class="easy2Btn">上传
</button> -->
<buttontype="button"class="easy1Btn"data-dismiss="modal">关闭
</button>
</div>
<divid="layer"></div>
<divid="onLoad"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->

4，服务器端配置

4.1，Dockerfile文件

位置: ./FileUpload/Dockerfile

# Version 0.1

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

# 维护者信息
MAINTAINER cbbing@163.com

# 镜像命令
COPYindex.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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。