使用bootstrap插件上传文件，文件上传样式超级好看

最近需要做一个视频上传的功能，但是感觉平常的文件上传样式不怎么好看，于是就选择了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代码如下：

扫描二维码关注公众号，回复： 1833022 查看本文章

<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{

public $max; //文件大小
public $arr=array("gif","png","jpg","bmp","jpeg",'mp4'); //文件后缀
public $error; //文件错误提示

/**
* File
* $file | 文件名
* return | 路径 / false
*/

function up($file){

//验证错误类型
switch ($file['error']) {
case '1': $this->error="上传文件超过php.ini中的设置";return false;
case '2': $this->error="上传文件超过表单中的设置";return flase;
case '3': $this->error="部分文件被上传";return false;
case '4': $this->error="没有文件被上传";return false;
}

//文件大小
$this->max=1024*1024*100;
if($file['size']>$this->max){
$this->error="上传图片超限";
return false;
}

//文件类型
$style=substr($file['type'],strpos($file['type'],'/')+1);
if(!in_array($style,$this->arr)){
$this->error="上传图片类型错误";
return false;
}

//定义要上传的路径
$puth='Uploads'.'/'.date('Y').'/'.date('m').'/'.date('d').'/';
//判断路径是否存在
is_dir($puth) or mkdir($puth,0777,true);

//定义新的文件名 (1)截取后缀名
$name=substr($file['name'],strpos($file['name'],'.'));
//(2)当前时间加随机数命名文件
$new_name=time().rand(10000,99999).$name;

//拼接要上传的路径
$new_puth=$puth.$new_name;
//移动文件到到指定文件夹
if(!empty($new_puth)){
//把临时路径放到指定路径
move_uploaded_file($file['tmp_name'], $new_puth);
return $new_puth;
}

}

/**
* File
* return | 错误详情
*/

function getError(){
return $this->error;
}

}

?>

有什么地方需要改进的还请各位大神指教！

使用bootstrap插件上传文件，文件上传样式超级好看

猜你喜欢