bootstrap-fileinput文件上傳組件和laravel引用(未完)

前言：之前的三篇介紹了下bootstrap table的一些常見用法，發現博主對這種扁平化的風格有點着迷了。前兩天做一個excel導入的功能，前端使用原始的input type='file'這種標簽，效果不忍直視，於是博主下定決心要找一個好看的上傳組件換掉它。既然bootstrap開源，那么社區肯定有很多關於它的組件，肯定也有這種常見的上傳組件吧。經過一番查找，功夫不負有心人，還是被博主找到了這個組件：bootstrap fileinput。關於這個組件的簡單應用，博客園大牛伍華聰寫過一篇基於Metronic的Bootstrap開發框架經驗總結（5）--Bootstrap文件上傳插件File Input的使用，只不過很多細節都沒有涉及，於是博主在完成開發任務之余，總結了下這個組件的一些常見用法。在此記錄下，就算做個筆記吧，也給需要使用的朋友提供點方便。

源碼以及API地址：

bootstrap-fileinput源碼：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在線API：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

 安裝：composer

$ php composer.phar require kartik-v/bootstrap-fileinput "dev-master"
或
$ composer require kartik-v/bootstrap-fileinput "dev-master"

當然也可以，在github上下載發布版，引入文件~~

 

 引入：

<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
<!-- optionally uncomment line below if using a theme or icon set like font awesome (note that default icons used are glyphicons and `fa` theme can override it) -->
<!-- link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css media="all" rel="stylesheet" type="text/css" /-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- piexif.min.js is only needed for restoring exif data in resized images and when you 
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
    This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
    HTML files. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
   3.3.x versions without popper.min.js. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
<!-- optionally uncomment line below for loading your theme assets for a theme like Font Awesome (`fa`) -->
<!-- script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/themes/fa/theme.min.js"></script -->
<!-- optionally if you need translation for your language then include  locale file as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script>

Html頁面（laravel表單提交必須token）所以

頭部要加入：

<meta name="csrf-token" content="{{ csrf_token() }}">

上傳表達這樣寫：

<form enctype="multipart/form-data" method="post">
       <label class="control-label">Select File</label>
       <input id="input-b5" name="input-b5[]" type="file" multiple>
          {{ csrf_field() }}
</form>



<script>

    $(document).ready(function(){
        $("#input-b5").fileinput({
            showCaption: false,
            theme: 'fa',
            language: 'zh',
            uploadUrl: './upload',
            allowedFileExtensions: ['jpg', 'png', 'gif']
        });
    });
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

</script>

控制器簡單的寫下：

class ReportController  extends Controller
{//報表處理類
    public function ReportUpload()
    {
        return view('admins/report/reportupload');

    }
    public function upload(Request $request)
    {
        $data = $request->all();
        dd($data);
    }

}

 

結果：

 

 

 

 

 

 

參考：https://www.cnblogs.com/landeanfen/p/5007400.html