最近需要做一個視訊上傳的功能，但是感覺平常的檔案上傳樣式不怎麼好看，於是就選擇了bootstrap的檔案上傳樣式，研究了研究，感覺還不錯，首先使用bootstrap應該下載bootatrap外掛。

下載地址：https://v2.bootcss.com/customize.html#download，

先看一下效果吧：

放上檔案或者視訊。可以實時觀看聽聲音

上傳成功之後返回done,下面是效果：

下面我們應該引入幾個bootstrap的js與css檔案，然後就是寫檔案上傳的form表單了

<link href="/backend/css/bootstrap.min.css" rel="stylesheet">
 

<link type="text/css" rel="stylesheet" href="/backend/bootstrap-fileinput-master/css/fileinput.css" />
<script type="text/javascript" src="/backend/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/backend/js/jquery.min.js"></script>
<script type="text/javascript" 
 
src="/backend/bootstrap-fileinput-master/js/fileinput.js"></script>
<!--中文包-->
<script type="text/javascript" src="/backend/bootstrap-fileinput-master/js/locales/zh.js"></script>

<div  style="width: 300px; height: 300px;">
    <form enctype="multipart/form-data">
        　　<input 
 
id="file-1" name="file" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"/>
    </form>
</div>

script程式碼如下：

<script>
    $("#file-1").fileinput({
        uploadUrl: '/course/venderadd', // 必須設定個路徑進入php程式碼部分
allowedFileExtensions : ['jpg', 'png','gif','txt','zip','ico','jpeg','js','css','java','mp3','mp4','doc','docx'],//允許的檔案型別
overwriteInitial: false,
        maxFileSize: 600000,//檔案的最大大小 單位是k
maxFilesNum: 10,//最多檔案數量
dataType:'json',
//        allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
            return filename;
        }
    });
</script>

然後上傳檔案的名字到了venderadd的操作名裡面，php程式碼進行如下編寫：

#視訊上傳
public function actionVenderadd(){
$file=$_FILES['file'];//獲取上稱檔案的資訊，陣列形式
$Up_obj = new Upload;
$path = $Up_obj->up($file);
$root = Yii::$app ->request->hostInfo;//獲取當前訪問的地址
$new_path = $root . '/' .$path;//檔案上傳成功之後的路徑}

這裡我例項化了一個我的檔案上傳類進行上傳，檔案上傳類程式碼如下：

<?php
namespace yii\web;
header("content-type:text/html;charset=utf8");
/**
* Class Upload
* 檔案上傳
*/

class Upload{