1，Docker鏡像
jQuery-File-Upload 組件是一個非常好用的文件上傳組件吓蘑，有很多友好的特性：
- 支持文件多選
- 拖拽上傳
- 上傳進度條
- 取消上傳
- 圖片、音視頻預覽
- 純JS和HTML5代碼，不需額外安裝插件
服務器端提供了三種部署方式: gae-go红伦、gae-python和php，前兩種基于gae根暑，在國內(nèi)基本被墻了，肯定用不了魂拦。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調(diào)用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;">
數(shù)據(jù)導入
</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>凈值數(shù)據(jù)</span></li>
<li id="positionDatatab"><span>持倉數(shù)據(jù)</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">關(guān)閉
</button>
</div>
<div id="layer"></div>
<div id="onLoad"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
4茁帽，服務器端配置
4.1玉罐，Dockerfile文件
位置: ./FileUpload/Dockerfile
# Version 0.1
# 基礎(chǔ)鏡像
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目錄。
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"
目錄結(jié)構(gòu)：
- docker-compose.yml
- FileUpload/
---- Dockerfile
---- index.html
4.3 運行
$ docker-compose up --build
參考
原文地址：http://kekefund.com/2017/06/15/jquery-file-upload-docker/
