基本布局

添加课程界面
七牛SDK接入

src/common/config/main.php

@@ -48,5 +48,22 @@ return [
                 '<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
             ],
         ],
+        'qiniu' => [
+            'class' => 'common\libs\Qiniu',
+            'accessKey' => 'n85SCPB9uO2v32az-3TRFsZCXwJu7YddyzLRYXg-',
+            'secretKey' => 'KDl3b7aLpj7n9YZ07lHGivVY4c_Q-0QSM0TZ_-XS',
+            'storages' => [
+                'video' => [
+                    'bucket' => 'pp-classroom-video',
+                    'fsizeLimit' => pow(1024, 2) * 5, //5MB
+                    'mimeLimit' => 'image/jpeg;image/png;image/gif'
+                ],
+                'public' => [
+                    'bucket' => 'pp-classroom',
+                    'filesizeLimit' => pow(1024, 3) * 2, //2GB
+                    'mimeLimit' => 'video/*;flv-application/octet-stream'
+                ]
+            ]
+        ]
     ],
 ];

src/common/libs/Qiniu.php

+<?php
+/**
+ * Created by PhpStorm.
+ * User: pader
+ * Date: 16/9/29
+ * Time: 16:05
+ */
+namespace common\libs;
+
+use yii\base\Object;
+use Qiniu\Auth;
+
+class Qiniu extends Object
+{
+	private $accessKey;
+	private $secretKey;
+	public $storages;
+	private $config;
+	
+	public function __construct($config=[]) {
+		$this->config = $config;
+		parent::__construct($config);
+	}
+
+	public function setAccessKey($accessKey) {
+		$this->accessKey = $accessKey;
+	}
+
+	public function setSecretKey($secretKey) {
+		$this->secretKey = $secretKey;
+	}
+
+	public function urlsafeBase64Encode($str) {
+		return str_replace(['+', '/'], ['-', '_'], base64_encode($str));
+	}
+
+	/**
+	 * 获取七牛鉴权实例
+	 *
+	 * @return Auth
+	 */
+	public function getAuthInstance()
+	{
+		static $auth = null;
+
+		if ($auth === null) {
+			$auth = new Auth($this->accessKey, $this->secretKey);
+		}
+
+		return $auth;
+	}
+
+	/**
+	 * 获取七牛上传 Token
+	 * 
+	 * @param string $storage 要存储的空间名称
+	 * @param string $filename 要存储的目标文件路径
+	 * @param string $returnBody 返回的数据格式
+	 * @param int $deadSeconds 生成的Token有效期
+	 * @return string
+	 */
+	public function getUploadToken($storage, $filename, $returnBody, $deadSeconds=3600)
+	{
+		if (!isset($this->storages[$storage])) {
+			exit('Unknow storage: '.$storage."\n");
+		}
+
+		$config = $this->storages[$storage];
+
+		$policy = [
+			'returnBody' => $returnBody,
+			'saveKey' => $filename,
+			'fsizeLimit' => pow(1024, 2) * 5,
+			'mimeLimit' => 'image/jpeg;image/png;image/gif'
+		];
+
+		$auth = $this->getAuthInstance();
+		return $auth->uploadToken($config['bucket'], $filename, $deadSeconds, $policy);
+	}
+
+}
\ No newline at end of file

src/composer.json

@@ -14,7 +14,8 @@
     "yiisoft/yii2-bootstrap": "*",
     "yiisoft/yii2-swiftmailer": "*",
     "yiisoft/yii2-redis": "^2.0",
-    "guzzlehttp/guzzle": "^6.2"
+    "guzzlehttp/guzzle": "^6.2",
+    "qiniu/php-sdk": "^7.0"
   },
   "require-dev": {
     "yiisoft/yii2-codeception": "*",

src/composer.lock

@@ -4,8 +4,8 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "bdf4a20720b1c71520c40efab351ceb5",
-    "content-hash": "97de8c5fe3587d7d90b4efc2a281a190",
+    "hash": "58c51098f2b70fd0b7cacfcb4527cb2f",
+    "content-hash": "ed7bd775092a2dda1558bb321d31c8c4",
     "packages": [
         {
             "name": "bower-asset/bootstrap",
@@ -520,6 +520,57 @@
             ],
             "time": "2016-08-06 14:39:51"
         },
+        {
+            "name": "qiniu/php-sdk",
+            "version": "v7.0.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/qiniu/php-sdk.git",
+                "reference": "d1bca450b56d85beb7ba21f374a47bfeb59c288b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://packagist.phpcomposer.com/files/qiniu/php-sdk/d1bca450b56d85beb7ba21f374a47bfeb59c288b.zip",
+                "reference": "d1bca450b56d85beb7ba21f374a47bfeb59c288b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.3"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "~4.0",
+                "squizlabs/php_codesniffer": "~2.3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Qiniu\\": "src/Qiniu"
+                },
+                "files": [
+                    "src/Qiniu/functions.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Qiniu",
+                    "email": "sdk@qiniu.com",
+                    "homepage": "http://www.qiniu.com"
+                }
+            ],
+            "description": "Qiniu Resource (Cloud) Storage SDK for PHP",
+            "homepage": "http://developer.qiniu.com/",
+            "keywords": [
+                "cloud",
+                "qiniu",
+                "sdk",
+                "storage"
+            ],
+            "time": "2016-07-19 06:18:08"
+        },
         {
             "name": "swiftmailer/swiftmailer",
             "version": "v5.4.3",

src/frontend/assets/AppAsset.php

@@ -12,20 +12,21 @@ class AppAsset extends AssetBundle
 {
     public $basePath = '@webroot/assets';
     public $baseUrl = '@web/assets';
-    
+
     public $css = [
         'css/style.css'
     ];
-    
+
     public $js = [
-        ['common/common.js','position'=>View::POS_HEAD],
+        ['common/common.js', 'position'=>View::POS_HEAD],
     ];
-    
+
     public $depends = [
-        'yii\web\YiiAsset',
+        //'yii\web\YiiAsset',
+        //'yii\web\JqueryAsset',
         'yii\bootstrap\BootstrapAsset'
     ];
-
+    
     //定义按需加载JS方法，注意加载顺序在最后
     public static function addScript($view, $jsfile)
     {
@@ -40,7 +41,6 @@ class AppAsset extends AssetBundle
         $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'frontend\assets\AppAsset']);
     }
 
-
     public static function appendTimestamp($url)
     {
         if (Yii::$app->assetManager->appendTimestamp && strncmp($url, '@web/', 5) === 0) {
@@ -50,4 +50,5 @@ class AppAsset extends AssetBundle
         }
         return $url;
     }
+
 }

src/frontend/config/main.php

@@ -19,8 +19,8 @@ return [
         'assetManager' => [
             'appendTimestamp' => TRUE,
             'bundles' => [
-                'yii\web\JqueryAsset' => FALSE,
-            ],
+                'yii\web\JqueryAsset' => false,
+            ]
         ],
         'session' => [
             'timeout' => 3600,

src/frontend/controllers/MyCourseController.php

@@ -2,6 +2,7 @@
 namespace frontend\controllers;
 
 use frontend\models\CoursePublishForm;
+use \Yii;
 
 class MyCourseController extends \yii\web\Controller
 {
@@ -15,6 +16,16 @@ class MyCourseController extends \yii\web\Controller
 
     public function actionPublish()
     {
+        /* @var \common\libs\Qiniu $qiniu */
+        $qiniu = Yii::$app->qiniu;
+
+        $randomName = $qiniu->urlsafeBase64Encode(uniqid());
+        $b = $qiniu->urlsafeBase64Encode(uniqid());
+
+        //$auth = Yii::$app->qiniu->getAuthInstance();
+        $pulicToken = $qiniu->getUploadToken('public', 'logo.png', '{name:"$(fname)"}');
+        $videoToken = $qiniu->getUploadToken('video', 'test.mp4', '{name:"$(fname)"}');
+
         $model = new CoursePublishForm();
         return $this->render('publish', compact('model'));
     }

src/frontend/views/layouts/user-center.php

 <?php
 use yii\helpers\Html;
+use yii\web\View;
 use frontend\assets\AppAsset;
 
 /* @var $this \yii\web\View */
 /* @var $content string */
 
 AppAsset::register($this);
+
+$js = <<<JS
+$(function() {
+	var Accordion = function(el, multiple) {
+		this.el = el || {};
+		this.multiple = multiple || false;
+
+		// Variables privadas
+		var links = this.el.find(".link");
+		// Evento
+		links.on("click", {el: this.el, multiple: this.multiple}, this.dropdown)
+	};
+
+	Accordion.prototype.dropdown = function(e) {
+		var el = e.data.el, self = $(this), next = self.next();
+
+		next.slideToggle();
+		self.parent().toggleClass("open");
+
+		if (!e.data.multiple) {
+			el.find(".submenu").not(next).slideUp().parent().removeClass("open");
+		}
+	};
+
+	new Accordion($("#accordion"), false);
+});
+JS;
+
+$this->registerJs($js, View::POS_END);
 ?>
 <?php $this->beginPage() ?>
 <!DOCTYPE html>
@@ -19,7 +49,7 @@ AppAsset::register($this);
 <?php $this->head() ?>
 </head>
 <body>
-<?php $this->beginBody() ?>
+<?php $this->beginBody(); ?>
 
 <div class="tp-sidebar">
 	<div class="logo"><a href="/"><img src="<?=Yii::$app->assetManager->baseUrl?>/img/logo.png"></a></div>
@@ -73,35 +103,7 @@ AppAsset::register($this);
 	<p>©2016 Zuiketang.com</p>
 </div>
 
-<script>
-$(function() {
-	var Accordion = function(el, multiple) {
-		this.el = el || {};
-		this.multiple = multiple || false;
-
-		// Variables privadas
-		var links = this.el.find('.link');
-		// Evento
-		links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
-	}
-
-	Accordion.prototype.dropdown = function(e) {
-		var $el = e.data.el;
-		$this = $(this),
-			$next = $this.next();
-
-		$next.slideToggle();
-		$this.parent().toggleClass('open');
-
-		if (!e.data.multiple) {
-			$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
-		};
-	}
-
-	var accordion = new Accordion($('#accordion'), false);
-});
-</script>
-<?php $this->endBody() ?>
+<?php $this->endBody(); ?>
 </body>
 </html>
-<?php $this->endPage() ?>
+<?php $this->endPage(); ?>

src/frontend/views/my-course/publish.php

@@ -9,10 +9,11 @@ use frontend\assets\AppAsset;
 
 $this->title = '发布课程';
 
+AppAsset::addScript($this, '@web/assets/lib/plupload/plupload.full.min.js');
 AppAsset::addScript($this, '@web/assets/course_publish.js');
 
 ?>
-<div class="send-class">
+<div class="send-class" id="publishMain">
 	<div class="tit">发布课程</div>
 
 	<form method="post" name="coursePublish">
@@ -47,21 +48,7 @@ AppAsset::addScript($this, '@web/assets/course_publish.js');
 
 	<div class="cls-part">
 		<div class="tit">上传视频</div>
-		<div class="upload-video-btn hide">
-			<input type="file">
-			<i class="icon-play"></i>
-			<b>上传视频</b>
-		</div>
-
-		<div class="upload-ready">
-			<h3>IMG_0760</h3>
-			<div class="video-detail">视频大小：300M  时常：45分钟</div>
-			<div class="video-loading-text clearfix">
-				<div class="upload pull-left">已上传 20.8%</div>
-				<div class="time pull-right">大约还剩 39 秒</div>
-			</div>
-			<i></i>
-		</div>
+		<video-upload></video-upload>
 	</div>
 
 	<div class="cls-part">

src/frontend/web/js/components/common/video-upload.vue

+<template>
+    <div>
+        <div class="upload-video-btn hide">
+            <input type="file">
+            <i class="icon-play"></i>
+            <b>上传视频</b>
+        </div>
+
+        <div class="upload-ready">
+            <h3>IMG_0760</h3>
+            <div class="video-detail">视频大小：300M  时常：45分钟</div>
+            <div class="video-loading-text clearfix">
+                <div class="upload pull-left">已上传 20.8%</div>
+                <div class="time pull-right">大约还剩 39 秒</div>
+            </div>
+            <i></i>
+        </div>
+    </div>
+</template>
+<style>
+
+</style>
+<script>
+//import HeaderComponent from './components/header.vue'
+//import OtherComponent from './components/other.vue'
+export default{
+    data(){
+        return{
+            msg:'hello vue'
+        }
+    },
+    components:{
+//        'other-component':OtherComponent,
+//        HeaderComponent,
+    }
+}
+</script>

src/frontend/web/js/index.js

+$(function() {
+	var Accordion = function(el, multiple) {
+		this.el = el || {};
+		this.multiple = multiple || false;
+
+		// Variables privadas
+		var links = this.el.find('.link');
+		// Evento
+		links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
+	}
+
+	Accordion.prototype.dropdown = function(e) {
+		var $el = e.data.el;
+			$this = $(this),
+			$next = $this.next();
+
+		$next.slideToggle();
+		$this.parent().toggleClass('open');
+
+		if (!e.data.multiple) {
+			$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
+		};
+	}	
+
+	var accordion = new Accordion($('#accordion'), false);
+});
\ No newline at end of file

src/frontend/web/js/my-course/publish.js

 /**
  * Created by pader on 16/9/28.
  */
-var validation = require('jquery-validation');
+
+var Vue = require('vue');
+var videoUpload = require('../components/common/video-upload.vue');
+
+require('jquery-validation');
+require('qiniu-js');
+
 var form = document.forms["coursePublish"];
 
-$(form).validate();
+
\ No newline at end of file
+var vm = new Vue({
+	el: '#publishMain',
+	components: {
+		videoUpload: videoUpload
+	}
+});
+
+$(form).validate();
+
+//var uploader = Qiniu.uploader({s});
\ No newline at end of file

src/frontend/web/lib/plupload/i18n/en.js

+// English (en)
+plupload.addI18n({"Stop Upload":"Stop Upload","Upload URL might be wrong or doesn't exist.":"Upload URL might be wrong or doesn't exist.","tb":"tb","Size":"Size","Close":"Close","You must specify either browse_button or drop_element.":"You must specify either browse_button or drop_element.","Init error.":"Init error.","Add files to the upload queue and click the start button.":"Add files to the upload queue and click the start button.","List":"List","Filename":"Filename","%s specified, but cannot be found.":"%s specified, but cannot be found.","Image format either wrong or not supported.":"Image format either wrong or not supported.","Status":"Status","HTTP Error.":"HTTP Error.","Start Upload":"Start Upload","Error: File too large:":"Error: File too large:","kb":"kb","Duplicate file error.":"Duplicate file error.","File size error.":"File size error.","N/A":"N/A","gb":"gb","Error: Invalid file extension:":"Error: Invalid file extension:","Select files":"Select files","%s already present in the queue.":"%s already present in the queue.","Resoultion out of boundaries! <b>%s</b> runtime supports images only up to %wx%hpx.":"Resoultion out of boundaries! <b>%s</b> runtime supports images only up to %wx%hpx.","File: %s":"File: %s","b":"b","Uploaded %d/%d files":"Uploaded %d/%d files","Upload element accepts only %d file(s) at a time. Extra files were stripped.":"Upload element accepts only %d file(s) at a time. Extra files were stripped.","%d files queued":"%d files queued","File: %s, size: %d, max file size: %d":"File: %s, size: %d, max file size: %d","Thumbnails":"Thumbnails","Drag files here.":"Drag files here.","Runtime ran out of available memory.":"Runtime ran out of available memory.","File count error.":"File count error.","File extension error.":"File extension error.","mb":"mb","Add Files":"Add Files"});
\ No newline at end of file

src/frontend/web/lib/plupload/i18n/zh_CN.js

+// Chinese (China) (zh_CN)
+plupload.addI18n({"Stop Upload":"停止上传","Upload URL might be wrong or doesn't exist.":"上传的URL可能是错误的或不存在。","tb":"tb","Size":"大小","Close":"关闭","You must specify either browse_button or drop_element.":"您必须指定 browse_button 或者 drop_element。","Init error.":"初始化错误。","Add files to the upload queue and click the start button.":"将文件添加到上传队列，然后点击”开始上传“按钮。","List":"列表","Filename":"文件名","%s specified, but cannot be found.":"%s 已指定，但是没有找到。","Image format either wrong or not supported.":"图片格式错误或者不支持。","Status":"状态","HTTP Error.":"HTTP 错误。","Start Upload":"开始上传","Error: File too large:":"错误: 文件太大:","kb":"kb","Duplicate file error.":"重复文件错误。","File size error.":"文件大小错误。","N/A":"N/A","gb":"gb","Error: Invalid file extension:":"错误：无效的文件扩展名:","Select files":"选择文件","%s already present in the queue.":"%s 已经在当前队列里。","Resoultion out of boundaries! <b>%s</b> runtime supports images only up to %wx%hpx.":"超限。<b>%s</b> 支持最大 %wx%hpx 的图片。","File: %s":"文件: %s","b":"b","Uploaded %d/%d files":"已上传 %d/%d 个文件","Upload element accepts only %d file(s) at a time. Extra files were stripped.":"每次只接受同时上传 %d 个文件，多余的文件将会被删除。","%d files queued":"%d 个文件加入到队列","File: %s, size: %d, max file size: %d":"文件: %s, 大小: %d, 最大文件大小: %d","Thumbnails":"缩略图","Drag files here.":"把文件拖到这里。","Runtime ran out of available memory.":"运行时已消耗所有可用内存。","File count error.":"文件数量错误。","File extension error.":"文件扩展名错误。","mb":"mb","Add Files":"增加文件"});
\ No newline at end of file

src/frontend/web/lib/plupload/i18n/zh_TW.js

+// Chinese (Taiwan) (zh_TW)
+plupload.addI18n({"Stop Upload":"停止上傳","Upload URL might be wrong or doesn't exist.":"檔案URL可能有誤或者不存在。","tb":"tb","Size":"大小","Close":"關閉","You must specify either browse_button or drop_element.":"","Init error.":"初始化錯誤。","Add files to the upload queue and click the start button.":"將檔案加入上傳序列，然後點選”開始上傳“按鈕。","List":"","Filename":"檔案名稱","%s specified, but cannot be found.":"","Image format either wrong or not supported.":"圖片格式錯誤或者不支援。","Status":"狀態","HTTP Error.":"HTTP 錯誤。","Start Upload":"開始上傳","Error: File too large:":"錯誤: 檔案大小太大:","kb":"kb","Duplicate file error.":"錯誤：檔案重複。","File size error.":"錯誤：檔案大小超過限制。","N/A":"N/A","gb":"gb","Error: Invalid file extension:":"錯誤：不接受的檔案格式:","Select files":"選擇檔案","%s already present in the queue.":"%s 已經存在目前的檔案序列。","Resoultion out of boundaries! <b>%s</b> runtime supports images only up to %wx%hpx.":"","File: %s":"檔案: %s","b":"b","Uploaded %d/%d files":"已上傳 %d/%d 個文件","Upload element accepts only %d file(s) at a time. Extra files were stripped.":"每次只能上傳 %d 個檔案，超過限制數量的檔案將被忽略。","%d files queued":"%d 個檔案加入到序列","File: %s, size: %d, max file size: %d":"檔案: %s, 大小: %d, 檔案大小上限: %d","Thumbnails":"","Drag files here.":"把檔案拖曳到這裡。","Runtime ran out of available memory.":"執行時耗盡了所有可用的記憶體。","File count error.":"檔案數量錯誤。","File extension error.":"檔案副檔名錯誤。","mb":"mb","Add Files":"增加檔案"});
\ No newline at end of file

src/frontend/web/lib/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css

+/* 
+   Plupload
+------------------------------------------------------------------- */
+
+.plupload_wrapper * {
+	box-sizing: content-box;
+}
+
+.plupload_button {
+	display: -moz-inline-box; /* FF < 3*/
+	display: inline-block;
+	font: normal 12px sans-serif;
+	text-decoration: none;
+    color: #42454a;
+    border: 1px solid #bababa;
+    padding: 2px 8px 3px 20px;
+	margin-right: 4px;
+    background: #f3f3f3 url('../img/buttons.png') no-repeat 0 center;
+	outline: 0;
+
+    /* Optional rounded corners for browsers that support it */
+    -moz-border-radius: 3px;
+    -khtml-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+
+.plupload_button:hover {
+	color: #000;
+	text-decoration: none;
+}
+
+.plupload_disabled, a.plupload_disabled:hover {
+    color: #737373;
+    border-color: #c5c5c5;
+    background: #ededed url('../img/buttons-disabled.png') no-repeat 0 center;
+	cursor: default;
+}
+
+.plupload_add {
+	background-position: -181px center;
+}
+
+.plupload_wrapper {
+	font: normal 11px Verdana,sans-serif;
+	width: 100%;
+}
+
+.plupload_container {
+	padding: 8px;
+	background: url('../img/transp50.png');
+	/*-moz-border-radius: 5px;*/
+}
+
+.plupload_container input {
+	border: 1px solid #DDD;
+	font: normal 11px Verdana,sans-serif;
+	width: 98%;
+}
+
+.plupload_header {background: #2A2C2E url('../img/backgrounds.gif') repeat-x;}
+.plupload_header_content {
+	background: url('../img/backgrounds.gif') no-repeat 0 -317px;
+	min-height: 56px;
+	padding-left: 60px;
+	color: #FFF;
+}
+.plupload_header_title {
+	font: normal 18px sans-serif;
+	padding: 6px 0 3px;
+}
+.plupload_header_text {
+	font: normal 12px sans-serif;
+}
+
+.plupload_filelist {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.plupload_scroll .plupload_filelist {
+	height: 185px;
+	background: #F5F5F5;
+	overflow-y: scroll;
+}
+
+.plupload_filelist li {
+	padding: 10px 8px;
+	background: #F5F5F5 url('../img/backgrounds.gif') repeat-x 0 -156px;
+	border-bottom: 1px solid #DDD;
+}
+
+.plupload_filelist_header, .plupload_filelist_footer {
+	background: #DFDFDF;
+	padding: 8px 8px;
+	color: #42454A;
+}
+.plupload_filelist_header {	
+	border-top: 1px solid #EEE;
+	border-bottom: 1px solid #CDCDCD;
+}
+
+.plupload_filelist_footer {border-top: 1px solid #FFF; height: 22px; line-height: 20px; vertical-align: middle;}
+.plupload_file_name {float: left; overflow: hidden}
+.plupload_file_status {color: #777;}
+.plupload_file_status span {color: #42454A;}
+.plupload_file_size, .plupload_file_status, .plupload_progress {
+	float: right;
+	width: 80px;
+}
+.plupload_file_size, .plupload_file_status, .plupload_file_action {text-align: right;}
+
+.plupload_filelist .plupload_file_name {
+	width: 205px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.plupload_file_action {
+	float: right;
+	width: 16px;
+	height: 16px;
+	margin-left: 15px;
+}
+
+.plupload_file_action * {
+	display: none;
+	width: 16px;
+	height: 16px;
+}
+
+li.plupload_uploading {background: #ECF3DC url('../img/backgrounds.gif') repeat-x 0 -238px;}
+li.plupload_done {color:#AAA}
+
+li.plupload_delete a {
+	background: url('../img/delete.gif');
+}
+
+li.plupload_failed a {
+	background: url('../img/error.gif');
+	cursor: default;
+}
+
+li.plupload_done a {
+	background: url('../img/done.gif');
+	cursor: default;
+}
+
+.plupload_progress, .plupload_upload_status {
+	display: none;
+}
+
+.plupload_progress_container {
+	margin-top: 3px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	padding: 1px;
+}
+.plupload_progress_bar {
+	width: 0px;
+	height: 7px;
+	background: #CDEB8B;
+}
+
+.plupload_scroll .plupload_filelist_header .plupload_file_action, .plupload_scroll .plupload_filelist_footer .plupload_file_action {
+	margin-right: 17px;
+}
+
+/* Floats */
+
+.plupload_clear,.plupload_clearer {clear: both;}
+.plupload_clearer, .plupload_progress_bar {
+	display: block;
+	font-size: 0;
+	line-height: 0;	
+}
+
+li.plupload_droptext {
+	background: transparent;
+	text-align: center;
+	vertical-align: middle;
+	border: 0;
+	line-height: 165px;
+}

src/frontend/web/lib/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js

+;(function(e,t){function r(e){return plupload.translate(e)||e}function i(t,n){n.contents().each(function(t,n){n=e(n),n.is(".plupload")||n.remove()}),n.prepend('<div class="plupload_wrapper plupload_scroll"><div id="'+t+'_container" class="plupload_container">'+'<div class="plupload">'+'<div class="plupload_header">'+'<div class="plupload_header_content">'+'<div class="plupload_header_title">'+r("Select files")+"</div>"+'<div class="plupload_header_text">'+r("Add files to the upload queue and click the start button.")+"</div>"+"</div>"+"</div>"+'<div class="plupload_content">'+'<div class="plupload_filelist_header">'+'<div class="plupload_file_name">'+r("Filename")+"</div>"+'<div class="plupload_file_action">&nbsp;</div>'+'<div class="plupload_file_status"><span>'+r("Status")+"</span></div>"+'<div class="plupload_file_size">'+r("Size")+"</div>"+'<div class="plupload_clearer">&nbsp;</div>'+"</div>"+'<ul id="'+t+'_filelist" class="plupload_filelist"></ul>'+'<div class="plupload_filelist_footer">'+'<div class="plupload_file_name">'+'<div class="plupload_buttons">'+'<a href="#" class="plupload_button plupload_add" id="'+t+'_browse">'+r("Add Files")+"</a>"+'<a href="#" class="plupload_button plupload_start">'+r("Start Upload")+"</a>"+"</div>"+'<span class="plupload_upload_status"></span>'+"</div>"+'<div class="plupload_file_action"></div>'+'<div class="plupload_file_status"><span class="plupload_total_status">0%</span></div>'+'<div class="plupload_file_size"><span class="plupload_total_file_size">0 b</span></div>'+'<div class="plupload_progress">'+'<div class="plupload_progress_container">'+'<div class="plupload_progress_bar"></div>'+"</div>"+"</div>"+'<div class="plupload_clearer">&nbsp;</div>'+"</div>"+"</div>"+"</div>"+"</div>"+'<input type="hidden" id="'+t+'_count" name="'+t+'_count" value="0" />'+"</div>")}var n={};e.fn.pluploadQueue=function(s){return s?(this.each(function(){function c(t){var n;t.status==plupload.DONE&&(n="plupload_done"),t.status==plupload.FAILED&&(n="plupload_failed"),t.status==plupload.QUEUED&&(n="plupload_delete"),t.status==plupload.UPLOADING&&(n="plupload_uploading");var r=e("#"+t.id).attr("class",n).find("a").css("display","block");t.hint&&r.attr("title",t.hint)}function h(){e("span.plupload_total_status",a).html(u.total.percent+"%"),e("div.plupload_progress_bar",a).css("width",u.total.percent+"%"),e("span.plupload_upload_status",a).html(t.sprintf(r("Uploaded %d/%d files"),u.total.uploaded,u.files.length))}function p(){var n=e("ul.plupload_filelist",a).html(""),i=0,s;e.each(u.files,function(t,r){s="",r.status==plupload.DONE&&(r.target_name&&(s+='<input type="hidden" name="'+f+"_"+i+'_tmpname" value="'+plupload.xmlEncode(r.target_name)+'" />'),s+='<input type="hidden" name="'+f+"_"+i+'_name" value="'+plupload.xmlEncode(r.name)+'" />',s+='<input type="hidden" name="'+f+"_"+i+'_status" value="'+(r.status==plupload.DONE?"done":"failed")+'" />',i++,e("#"+f+"_count").val(i)),n.append('<li id="'+r.id+'">'+'<div class="plupload_file_name"><span>'+r.name+"</span></div>"+'<div class="plupload_file_action"><a href="#"></a></div>'+'<div class="plupload_file_status">'+r.percent+"%</div>"+'<div class="plupload_file_size">'+plupload.formatSize(r.size)+"</div>"+'<div class="plupload_clearer">&nbsp;</div>'+s+"</li>"),c(r),e("#"+r.id+".plupload_delete a").click(function(t){e("#"+r.id).remove(),u.removeFile(r),t.preventDefault()})}),e("span.plupload_total_file_size",a).html(plupload.formatSize(u.total.size)),u.total.queued===0?e("span.plupload_add_text",a).html(r("Add Files")):e("span.plupload_add_text",a).html(t.sprintf(r("%d files queued"),u.total.queued)),e("a.plupload_start",a).toggleClass("plupload_disabled",u.files.length==u.total.uploaded+u.total.failed),n[0].scrollTop=n[0].scrollHeight,h(),!u.files.length&&u.features.dragdrop&&u.settings.dragdrop&&e("#"+f+"_filelist").append('<li class="plupload_droptext">'+r("Drag files here.")+"</li>")}function d(){delete n[f],u.destroy(),a.html(l),u=a=l=null}var u,a,f,l;a=e(this),f=a.attr("id"),f||(f=plupload.guid(),a.attr("id",f)),l=a.html(),i(f,a),s=e.extend({dragdrop:!0,browse_button:f+"_browse",container:f},s),s.dragdrop&&(s.drop_element=f+"_filelist"),u=new plupload.Uploader(s),n[f]=u,u.bind("UploadFile",function(t,n){e("#"+n.id).addClass("plupload_current_file")}),u.bind("Init",function(t,n){!s.unique_names&&s.rename&&a.on("click","#"+f+"_filelist div.plupload_file_name span",function(n){var r=e(n.target),i,s,o,u="";i=t.getFile(r.parents("li")[0].id),o=i.name,s=/^(.+)(\.[^.]+)$/.exec(o),s&&(o=s[1],u=s[2]),r.hide().after('<input type="text" />'),r.next().val(o).focus().blur(function(){r.show().next().remove()}).keydown(function(t){var n=e(this);t.keyCode==13&&(t.preventDefault(),i.name=n.val()+u,r.html(i.name),n.blur())})}),e("#"+f+"_container").attr("title","Using runtime: "+n.runtime),e("a.plupload_start",a).click(function(t){e(this).hasClass("plupload_disabled")||u.start(),t.preventDefault()}),e("a.plupload_stop",a).click(function(e){e.preventDefault(),u.stop()}),e("a.plupload_start",a).addClass("plupload_disabled")}),u.bind("Error",function(t,n){var i=n.file,s;i&&(s=n.message,n.details&&(s+=" ("+n.details+")"),n.code==plupload.FILE_SIZE_ERROR&&alert(r("Error: File too large:")+" "+i.name),n.code==plupload.FILE_EXTENSION_ERROR&&alert(r("Error: Invalid file extension:")+" "+i.name),i.hint=s,e("#"+i.id).attr("class","plupload_failed").find("a").css("display","block").attr("title",s)),n.code===plupload.INIT_ERROR&&setTimeout(function(){d()},1)}),u.bind("PostInit",function(t){t.settings.dragdrop&&t.features.dragdrop&&e("#"+f+"_filelist").append('<li class="plupload_droptext">'+r("Drag files here.")+"</li>")}),u.init(),u.bind("StateChanged",function(){u.state===plupload.STARTED?(e("li.plupload_delete a,div.plupload_buttons",a).hide(),u.disableBrowse(!0),e("span.plupload_upload_status,div.plupload_progress,a.plupload_stop",a).css("display","block"),e("span.plupload_upload_status",a).html("Uploaded "+u.total.uploaded+"/"+u.files.length+" files"),s.multiple_queues&&e("span.plupload_total_status,span.plupload_total_file_size",a).show()):(p(),e("a.plupload_stop,div.plupload_progress",a).hide(),e("a.plupload_delete",a).css("display","block"),s.multiple_queues&&u.total.uploaded+u.total.failed==u.files.length&&(e(".plupload_buttons,.plupload_upload_status",a).css("display","inline"),u.disableBrowse(!1),e(".plupload_start",a).addClass("plupload_disabled"),e("span.plupload_total_status,span.plupload_total_file_size",a).hide()))}),u.bind("FilesAdded",p),u.bind("FilesRemoved",function(){var t=e("#"+f+"_filelist").scrollTop();p(),e("#"+f+"_filelist").scrollTop(t)}),u.bind("FileUploaded",function(e,t){c(t)}),u.bind("UploadProgress",function(t,n){e("#"+n.id+" div.plupload_file_status",a).html(n.percent+"%"),c(n),h()}),s.setup&&s.setup(u)}),this):n[e(this[0]).attr("id")]}})(jQuery,mOxie);
\ No newline at end of file

src/frontend/web/lib/plupload/jquery.ui.plupload/css/jquery.ui.plupload.css

+/*
+   Plupload
+------------------------------------------------------------------- */
+
+.plupload_wrapper * {
+	box-sizing: content-box;
+}
+
+.plupload_button {
+	cursor: pointer;
+	outline: none;
+}
+
+.plupload_wrapper {
+	font: normal 11px Verdana,sans-serif;
+	width: 100%;
+	min-width: 520px;
+	line-height: 12px;
+}
+
+.plupload_container {
+	_height: 300px;
+	min-height: 300px;
+	position: relative;
+}
+
+.plupload_filelist_footer {border-width: 1px 0 0 0}
+.plupload_file {border-width: 0 0 1px 0}
+.plupload_container .plupload_header {border-width: 0 0 1px 0; position: relative;}
+
+.plupload_delete .ui-icon, 
+.plupload_done .ui-icon,
+.plupload_failed .ui-icon {
+	cursor:pointer;	
+}
+
+.plupload_header_content {
+	height: 56px;
+	padding: 0 160px 0 60px;
+	position: relative;
+}
+
+.plupload_logo {
+	width: 40px;
+	height: 40px;
+	background: url('../img/plupload.png') no-repeat 0 0;
+	position: absolute;
+	top: 8px;
+	left: 8px;
+}
+
+.plupload_header_content_bw .plupload_logo {
+	background-position: -40px 0;
+}
+
+.plupload_header_title {
+	font: normal 18px sans-serif;
+	line-height: 19px;
+	padding: 6px 0 3px;
+}
+
+.plupload_header_text {
+	font: normal 12px sans-serif;
+}
+
+.plupload_view_switch {
+	position: absolute;
+	right: 16px;
+	bottom: 8px;
+	margin: 0;
+	display: none;
+}
+
+.plupload_view_switch .ui-button {
+	margin-right: -0.31em;
+}
+
+.plupload_content {
+	position: absolute;
+	top: 86px;
+	bottom: 44px;
+	left: 0;
+	right: 0;
+	overflow-y: auto;
+	width: 100%;
+}
+
+.plupload_filelist {
+	border-collapse: collapse;
+	border-left: none;
+	border-right: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.plupload_filelist_content {
+	padding: 0;
+	margin: 0;
+}
+
+.plupload_cell {padding: 8px 6px;}
+
+.plupload_file {
+	list-style: none;
+	display: block;
+	position: relative;
+	overflow: hidden;
+	line-height: 12px;
+}
+
+.plupload_file_thumb {
+	position: relative;
+	background-image: none;
+	background-color: #eee;
+}
+
+.plupload_thumb_loading {
+	background: #eee url(../img/loading.gif) center no-repeat;
+}
+
+.plupload_thumb_loading .plupload_file_dummy,
+.plupload_thumb_embedded .plupload_file_dummy {
+	display: none;
+}
+
+.plupload_file_name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.plupload_filelist_header {
+	border-top: none;
+}
+
+.plupload_filelist_footer {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.plupload_buttons { 
+	position: relative;
+}
+
+/* list view */
+.plupload_view_list .plupload_file {
+	border-left: none;
+	border-right: none;
+	border-top: none;
+	height: 29px;
+	width: 100% !important;
+	/* fix IE6 vertical white-space bug */
+	_float: left;
+	_clear: left;
+}
+
+.plupload_view_list div.plupload_file_size, 
+.plupload_view_list div.plupload_file_status,
+.plupload_view_list div.plupload_file_action {
+	padding: 8px 6px;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.plupload_view_list div.plupload_file_name {
+	margin-right: 156px;
+	padding: 8px 6px;
+	_width: 75%;
+}
+
+.plupload_view_list div.plupload_file_size {
+	right: 28px;
+}
+
+.plupload_view_list div.plupload_file_status {
+	right: 82px;
+}
+
+.plupload_view_list .plupload_file_rename {
+	margin-left: -2px;
+}
+
+.plupload_view_list .plupload_file_size, 
+.plupload_view_list .plupload_file_status,
+.plupload_filelist_footer .plupload_file_size, 
+.plupload_filelist_footer .plupload_file_status {
+	text-align: right; 
+	width: 52px;
+}
+
+.plupload_view_list .plupload_file_thumb {
+	position: absolute;
+	top: -999px;
+}
+
+.plupload_view_list .plupload_file_progress {
+	display: none;
+}
+
+
+/* thumbs view */
+.plupload_view_thumbs .plupload_content {
+	top: 57px;
+}
+
+.plupload_view_thumbs .plupload_filelist_header {
+	display: none;
+}
+
+.plupload_view_thumbs .plupload_file {
+	padding: 6px;
+	margin: 10px;
+	border: 1px solid #fff;
+	float: left;
+}
+
+.plupload_view_thumbs .plupload_file_thumb,
+.plupload_view_thumbs .plupload_file_dummy {
+	text-align: center;
+	overflow: hidden;
+}
+
+.plupload_view_thumbs .plupload_file_dummy {
+	font-size: 21px;
+	font-weight: bold;
+	text-transform: lowercase;
+	overflow: hidden;
+	border: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.plupload_view_thumbs div.plupload_file_action {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.plupload_view_thumbs div.plupload_file_name {
+	padding: 0;
+	font-weight: bold;
+}
+
+.plupload_view_thumbs .plupload_file_rename {
+	padding: 1px 0;
+	width: 100% !important;
+}
+
+.plupload_view_thumbs div.plupload_file_size {
+	font-size: 0.8em;
+	font-weight: normal;
+}
+
+.plupload_view_thumbs div.plupload_file_status {
+	position: relative;	
+	height: 3px;
+	overflow: hidden;
+	text-indent: -999px;
+	margin-bottom: 3px;
+}
+
+.plupload_view_thumbs div.plupload_file_progress {
+	border: none;
+	height: 100%;
+}
+
+.plupload .ui-sortable-helper,
+.plupload .ui-sortable .plupload_file {
+	cursor:move;	
+}
+
+.plupload_file_action {width: 16px;}
+.plupload_file_name {
+	overflow: hidden;
+	padding-left: 10px;
+}
+
+.plupload_file_rename {
+	border: none;
+	font: normal 11px Verdana, sans-serif;
+	padding: 1px 2px;
+	line-height: 11px;
+	height: 11px;
+}
+
+.plupload_progress {width: 60px;}
+.plupload_progress_container {padding: 1px;}
+
+
+/* Floats */
+
+.plupload_right {float: right;}
+.plupload_left {float: left;}
+.plupload_clear,.plupload_clearer {clear: both;}
+.plupload_clearer, .plupload_progress_bar {
+	display: block;
+	font-size: 0;
+	line-height: 0;
+}
+.plupload_clearer {height: 0;}
+
+/* Misc */
+.plupload_hidden {display: none !important;}
+
+.plupload_droptext {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: transparent;
+	text-align: center;
+	vertical-align: middle;
+	border: 0;
+	line-height: 160px;
+	display: none;
+}
+
+.plupload_dropbox .plupload_droptext {
+	display: block;
+}
+
+.plupload_buttons, .plupload_upload_status {float: left}
+
+.plupload_message {
+	position: absolute;
+	top: -1px;
+	left: -1px;	
+	height: 100%;
+	width: 100%;
+}
+
+.plupload_message p {
+	padding:0.7em;
+	margin:0;
+}
+
+.plupload_message strong {
+	font-weight: bold;	
+}
+
+.plupload_message i {
+	font-style: italic;	
+}
+
+.plupload_message p span.ui-icon {
+	float: left;
+	margin-right: 0.3em;	
+}
+
+.plupload_header_content .ui-state-error,
+.plupload_header_content .ui-state-highlight {
+	border:none;	
+}
+
+.plupload_message_close {
+	position:absolute;
+	top:5px;
+	right:5px;
+	cursor:pointer;	
+}
+
+.plupload .ui-sortable-placeholder {
+	height:35px;
+}

src/frontend/web/package.json

@@ -44,4 +44,4 @@
     "moment": "^2.13.0",
     "vue": "^1.0.8"
   }
-}
+}
\ No newline at end of file

src/frontend/web/webpack.config.js

@@ -68,6 +68,7 @@ var config = {
             // {from: __dirname + '/resource', to: 'resource'},
             {from: lib_dir + '/layer', to: 'layer'},
             {from: img_dir, to: 'img'},
+            {from: __dirname + '/lib', to: 'lib'},
             // {from: manage_dir + '/dist', to: 'manage/dist'},
             // {from: manage_dir + '/plugins', to: 'manage/plugins'},
             // {from: manage_dir + '/bootstrap', to: 'manage/bootstrap'}
@@ -79,11 +80,11 @@ var config = {
             'js-dir': js_dir,
             'css-dir': css_dir,
             'layer-js': lib_dir + '/layer/2.4/layer.js',
+            'qiniu-js': lib_dir + '/qiniu/qiniu.js',
             'helper': js_dir + '/helper/helper.js',
             'helper-dir': js_dir + '/helper'
         }
     }
-
 };