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

巴特西

bootstrap-fileinput文件上传组件和laravel引用(未完)

最新文章

热门文章