bootstrap fileinput 插件在thinkPHP5 的使用

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

  1. 引入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状态

  1. 后台的代码如下
 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());
        }

    }

这里有两个坑:
1. 文件接收是数组,必须按数组的处理方式来使用move()
2. 结果返回一定要是json形式,不然HTML页面会报错


本文由 admin 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论