采用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，請求到伺服器端的檔案上傳接口。

<!-- 導入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">
×
</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

# 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/