bootstrap fileinput 插件在thinkPHP5 的使用

无标签

PHP

发布日期: 2020-02-23

##bootstrap fileinput 插件在thinkPHP5 的使用
首先，对原生的input上传文件感觉不是很美观，也不是很方便，例如上传错了，如何删除。我已经上传了哪些图片，怎么查看，等等一系列问题。于是，想着有没有什么插件既能美化下input样式又能实现上述所写的功能。百度搜了一下还真有这样的插件。
bootstrap fileinput 还有[中文网][1]。文档写的很详细。可以点击看看。
如果，你对PHP上传文件如图片不是很熟悉的话，建议你看我的这篇文章”[PHP高级实战–文件上传类][2]”.

引入bootstrap fileinput 插件

<!DOCTYPE html>
<!-- release v5.0.8, copyright 2014 - 2019 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Krajee JQuery Plugins</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
    <link href="./static/file/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link href="./static/file/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="./static/file/js/plugins/piexif.js" type="text/javascript"></script>
    <script src="./static/file/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="./static/file/js/fileinput.js" type="text/javascript"></script>
    <script src="./static/file/js/locales/zh.js" type="text/javascript"></script>
    <script src="./static/file/themes/fas/theme.js" type="text/javascript"></script>
    <script src="./static/file/themes/explorer-fas/theme.js" type="text/javascript"></script>
</head>

<body>
    <div class="container my-4">
        <h1>Bootstrap File Input Examples
            <small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i
                class="glyphicon glyphicon-download"></i> Download Sample Files</a></small>
        </h1>
        <hr>
        <form enctype="multipart/form-data" method="post">
            <label>上传文件</label>
            <div class="file-loading">
                <input id="file-1" name="file-1[]" type="file" multiple>
            </div>
        </form>
        <hr>
        <br>
    </div>
    <script>
        $("#file-1").fileinput({
            theme: 'fas',
            language: 'zh',
            uploadUrl: "http://localhost/fileinput/public/index.php/Index/index/add", // you must set a valid URL here else you will get an error
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            overwriteInitial: false,
            maxFileSize: 1000,
            maxFileCount: 2,
        });
    </script>
</body>

</html>

上面代码简单介绍下
<script src="./static/file/js/locales/zh.js" type="text/javascript"></script>
这个是汉化用的，如果没有zh.js显示的是中文很不方便，其余的就是css和js引用只要顺序和路径没有错就行了

<form enctype="multipart/form-data" method="post">
           <label>上传文件</label>
           <div class="file-loading">
               <input id="file-1" name="file-1[]" type="file" multiple>
           </div>
       </form>

这个核心的HTML文件代码

<script>
       $("#file-1").fileinput({
           theme: 'fas',
           language: 'zh',
           uploadUrl: "http://localhost/fileinput/public/index.php/Index/index/add", // you must set a valid URL here else you will get an error
           allowedFileExtensions: ['jpg', 'png', 'gif'],
           overwriteInitial: false,
           maxFileSize: 1000,
           maxFileCount: 2,
       });
   </script>

这块必须要填不然页面一直是loading状态

后台的代码如下

public function add(){
       $fileArr=request()->file('file-1');

       foreach($fileArr as $k=>$file){
           $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
       }
       if($info){
           $proimage= DS . 'uploads'.'/'.$info->getSaveName();
           return json_encode($proimage);

       }else{
           // 上传失败获取错误信息
          return json_encode($file->getError());
       }

   }