laravel excel bootstrap fileinput

2017.03.06 Monday 00:33
0
    ★★★★
    ★★★★
    参考になった
    composer dump-autoload
    http://laravel.hatenablog.com/entry/2014/10/17/000000
    http://reffect.co.jp/blog/post/laravel-csv-easy-way


    ここからとってきた
    https://github.com/kartik-v/bootstrap-fileinput
    http://ionicons.com/
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

    左に
    サーバーろぐ1号機
    サーバーろぐ2号機
    くらいあんとろぐ1号機
    くらいあんとろぐ2号機


    ★★ index.blade.php

    @include('common.header')

    @include('common.body_header')

    @include('common.sidebar')




    <script src="http://localhost/l5blog/resources/views/adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <link href="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>
    <script src="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/js/locales/ja.js" type="text/javascript"></script>
    <!--
    <link href="http://localhost/l5blog/resources/views/adminlte/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    -->
    <link href="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
    This must be loaded before fileinput.min.js -->
    <script src="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/js/plugins/canvas-to-blob.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="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/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="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/js/plugins/purify.min.js" type="text/javascript"></script>
    <!-- the main fileinput plugin file -->
    <script src="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/js/fileinput.min.js"></script>
    <!-- bootstrap.js below is needed if you wish to zoom and view file content
    in a larger detailed modal dialog -->
    <script src="http://localhost/l5blog/resources/views/adminlte/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- optionally if you need a theme like font awesome theme you can include
    it as mentioned below -->
    <script src="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/themes/fa/theme.js"></script>
    <!-- optionally if you need translation for your language then include
    locale file as mentioned below -->
    <script src="http://localhost/l5blog/public/assets/bootstrap-fileinput-master/js/locales/ja.js"></script>


    11111111




    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
    <h1>
    Page Header
    <small>Optional description</small>
    </h1>
    <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
    <li class="active">Here</li>
    </ol>
    </section>

    <!-- Main content -->
    <section class="content">

    <!-- Your Page Content Here -->

    <h4>CSVファイルを選択してください</h4>
    <form role="form" method="post" action="{{ route('import') }}" enctype="multipart/form-data">
    {{ csrf_field() }}

    <!--
    <div class="form-group">
    <input id="file-0d" class="file" type="file" name="csv_file" name="inputja[]">
    </div>
    -->
    <div class="form-group">
    <input id="input-ja" class="file" type="file" name="csv_file" multiple class="file-loading">
    </div>


    <script>
    $("#input-ja").fileinput({
    language: "ja",
    allowedFileExtensions: ["jpg", "png", "gif","csv"]
    });
    </script>




    </form>

    uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu


    @if( count($data) > 0 )

    <div class="box">
    <div class="box-header">
    <h3 class="box-title">Data Table With Full Features</h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
    <table id="example1" class="table table-bordered table-striped">
    <thead>
    <tr>
    <th>{{{ $tableheader[0] }}}</th>
    <th>{{{ $tableheader[1] }}}</th>
    <th>{{{ $tableheader[2] }}}</th>
    <th>{{{ $tableheader[3] }}}</th>
    <th>{{{ $tableheader[4] }}}</th>
    </tr>
    </thead>
    <tbody>
    <!--
    <button>の data-toggleはmodal、
    data-targetは、起動させたいモーダルのIDを指定する
    モーダルに渡したい情報も data-* 属性で渡すことが出来ます

    <button>のdata-targetの#idと、モーダルの<div>のidは、同じものにしてください
    -->

    @foreach($data as $v)
    <tr data-toggle="modal" data-target="#exampleModal" data-whatever="{{{ $v['reg_type'] }}},{{{ $v['reg_name'] }}},{{{ $v['hostname'] }}},{{{ $v['object_type'] }}},{{{ $v['message'] }}}">
    <td><div data-whatever0="{{{ $v['reg_type'] }}}">{{{ $v['reg_type'] }}}aaa</div></td>
    <td><div data-whatever1="{{{ $v['reg_name'] }}}">{{{ $v['reg_name'] }}}</div></td>
    <td><div data-whatever2="{{{ $v['hostname'] }}}">{{{ $v['hostname'] }}}</div></td>
    <td><div data-whatever3="{{{ $v['object_type'] }}}">{{{ $v['object_type'] }}}</div></td>
    <td><div data-whatever4="{{{ $v['message'] }}}">{{{ $v['message'] }}}</div></td>
    </tr>
    @endforeach
    </tbody>
    <tfoot>
    <tr>
    <th>{{{ $tableheader[0] }}}</th>
    <th>{{{ $tableheader[1] }}}</th>
    <th>{{{ $tableheader[2] }}}</th>
    <th>{{{ $tableheader[3] }}}</th>
    <th>{{{ $tableheader[4] }}}</th>
    </tr>
    </tfoot>
    </table>
    </div>
    </div>
    <!-- /.box-body -->

    @endif

    zzz






    ...more buttons...

    <!-- modal内容 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
    </div>
    <div class="modal-body">
    <form>
    <div class="form-group">
    <label for="recipient-name" class="control-label">Recipient:</label>
    <input type="text" class="form-control" id="recipient-name" >
    </div>
    <div class="form-group">
    <label for="message-text" class="control-label">Message:</label>
    <textarea class="form-control" id="message-text"></textarea>
    </div>


    <div class="form-group"><input type="text" class="form-control" id="recipient-name0" ></div>
    <div class="form-group"><input type="text" class="form-control" id="recipient-name1" ></div>
    <div class="form-group"><input type="text" class="form-control" id="recipient-name2" ></div>
    <div class="form-group"><input type="text" class="form-control" id="recipient-name3" ></div>
    <div class="form-group"><input type="text" class="form-control" id="recipient-name4" ></div>


    </form>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary" id='b2'>Send message</button>
    </div>
    </div>
    </div>
    </div>
    <!-- /modal内容 -->


    bbbbbbbbbbbbbbbb

    </section>
    <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->





    @include('common.footer')



    hh
    {{ count($data) }}
    @if( count($data) > 0 )
    rrr
    @endif
    hhh
    @if( count($data) > 0 )
    <script>
    $('#exampleModal').on('show.bs.modal', function (event) {

    var linedata = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
    var recipient = linedata.data('whatever') //data-whatever の値を取得

    //カンマ区切り複数パラメータ
    var Arraystr = recipient.split(",");
    //alert('**'+Arraystr[1]);
    var recipient0 = Arraystr[0];
    var recipient1 = Arraystr[1];
    var recipient2 = Arraystr[2];
    var recipient3 = Arraystr[3];
    var recipient4 = Arraystr[4];

    //console.log(recipient);
    // var recipient0 = div.data('whatever0') //data-whatever の値を取得
    // var recipient1 = div.data('whatever1') //data-whatever の値を取得
    // var recipient2 = div.data('whatever2') //data-whatever の値を取得
    // var recipient3 = div.data('whatever3') //data-whatever の値を取得
    // var recipient4 = div.data('whatever4') //data-whatever の値を取得

    //console.log(div);

    //alert(div.data('whatever0'));

    //Ajaxの処理はここに

    var modal = $(this) //モーダルを取得
    // modal.find('.modal-title').text('New message to ' + recipient) //モーダルのタイトルに値を表示
    // modal.find('.modal-body input#recipient-name').val(recipient) //inputタグにも表示
    // modal.find('.modal-body textarea#message-text').val(recipient) //inputタグにも表示

    modal.find('.modal-body input#recipient-name0').val(recipient0) //inputタグにも表示
    modal.find('.modal-body input#recipient-name1').val(recipient1) //inputタグにも表示
    modal.find('.modal-body input#recipient-name2').val(recipient2) //inputタグにも表示
    modal.find('.modal-body input#recipient-name3').val(recipient3) //inputタグにも表示
    modal.find('.modal-body input#recipient-name4').val(recipient4) //inputタグにも表示

    })


    </script>
    @endif





    <script>
    $('#file-fr').fileinput({
    language: 'fr',
    uploadUrl: '#',
    allowedFileExtensions: ['jpg', 'png', 'gif']
    });
    $('#file-es').fileinput({
    language: 'es',
    uploadUrl: '#',
    allowedFileExtensions: ['jpg', 'png', 'gif']
    });
    $("#file-0").fileinput({
    'allowedFileExtensions': ['jpg', 'png', 'gif']
    });
    $("#file-1").fileinput({
    uploadUrl: '#', // you must set a valid URL here else you will get an error
    allowedFileExtensions: ['jpg', 'png', 'gif'],
    overwriteInitial: false,
    maxFileSize: 1000,
    maxFilesNum: 10,
    //allowedFileTypes: ['image', 'video', 'flash'],
    slugCallback: function (filename) {
    return filename.replace('(', '_').replace(']', '_');
    }
    });
    /*
    $(".file").on('fileselect', function(event, n, l) {
    alert('File Selected. Name: ' + l + ', Num: ' + n);
    });
    */
    $("#file-3").fileinput({
    showUpload: false,
    showCaption: false,
    browseClass: "btn btn-primary btn-lg",
    fileType: "any",
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
    overwriteInitial: false,
    initialPreviewAsData: true,
    initialPreview: [
    "http://lorempixel.com/1920/1080/transport/1",
    "http://lorempixel.com/1920/1080/transport/2",
    "http://lorempixel.com/1920/1080/transport/3",
    ],
    initialPreviewConfig: [
    {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
    {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
    {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3},
    ],
    });
    $("#file-4").fileinput({
    uploadExtraData: {kvId: '10'}
    });
    $(".btn-warning").on('click', function () {
    var $el = $("#file-4");
    if ($el.attr('disabled')) {
    $el.fileinput('enable');
    } else {
    $el.fileinput('disable');
    }
    });
    $(".btn-info").on('click', function () {
    $("#file-4").fileinput('refresh', {previewClass: 'bg-info'});
    });
    /*
    $('#file-4').on('fileselectnone', function() {
    alert('Huh! You selected no files.');
    });
    $('#file-4').on('filebrowse', function() {
    alert('File browse clicked for #file-4');
    });
    */
    $(document).ready(function () {
    $("#test-upload").fileinput({
    'showPreview': false,
    'allowedFileExtensions': ['jpg', 'png', 'gif'],
    'elErrorContainer': '#errorBlock'
    });
    $("#kv-explorer").fileinput({
    'theme': 'explorer',
    'uploadUrl': '#',
    overwriteInitial: false,
    initialPreviewAsData: true,
    initialPreview: [
    "http://lorempixel.com/1920/1080/nature/1",
    "http://lorempixel.com/1920/1080/nature/2",
    "http://lorempixel.com/1920/1080/nature/3",
    ],
    initialPreviewConfig: [
    {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
    {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
    {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3},
    ]
    });
    /*
    $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
    alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
    });
    */
    });
    </script>





    ★★route.php
    Route::get('/', 'ArticlesController@index');
    Route::controller('articles', 'ArticlesController');
    Route::post('/import', [
    'as' => 'import',
    'uses' => 'ArticlesController@index'
    ]);




    ★★articlesController.php

    namespace App¥Http¥Controllers;

    use App¥Article;
    use App¥Http¥Requests;
    use App¥Http¥Controllers;
    use App¥Repositories¥ArticleInterface;
    use App¥Services¥ArticleService;
    use Illuminate¥Http¥Request;

    use Excel;
    use Input;


    class ArticlesController extends Controller {

    /**
    * @var KeihiServiceInterface
    */
    private $articleInterface;

    /**
    * @var Article
    */
    // protected $article;

    /**
    * @param KeihiServiceInterface $keihiServiceInterface
    */
    public function __construct(ArticleService $articleInterface)
    {
    $this->articleInterface = $articleInterface;
    }



    /**
    * 一覧
    * @return ¥Illuminate¥Http¥Response
    */
    public function index(Request $request)
    {

    // 初期設定
    $articles = [];
    $contents ="" ;
    $data = [] ;
    $tableheader = [] ;

    $file = $request->file('csv_file');
    if( empty($file) ){
    echo "aaa1 csvファイル指定無し";

    } else {
    echo "aaa2 csvファイル指定あり" ;
    $reader = Excel::load($file->getRealPath());

    $rows = $reader->toArray();

    $kk = array_keys($rows[0]);

    $tableheader[0] = $kk[0] ;
    $tableheader[1] = $kk[1] ;
    $tableheader[2] = $kk[2] ;
    $tableheader[3] = $kk[3] ;
    $tableheader[4] = $kk[4] ;

    foreach ($rows as $key => $row){

    // データ変換必要になる可能性があるため、その場合はここで処理
    $data[$key]['reg_type'] = $row['reg_type'] ;
    $data[$key]['reg_name'] = $row['reg_name'] ;
    $data[$key]['hostname'] = $row['hostname'] ;
    $data[$key]['object_type'] = $row['object_type'] ;
    $data[$key]['message'] = $row['message'] ;


    return view('articles.index')
    ->with(compact('articles'))
    ->with(compact('tableheader'))
    ->with(compact('data'));

    }

    public function create()
    {
    return view('articles.create');
    }

    }




    ★★bootstrap fileinput

    ★★header.blade.php
    <!DOCTYPE html>
    <!--
    This is a starter template page. Use this page to start your new project from
    scratch. This page gets rid of all links and provides the needed markup only.
    -->
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="http://localhost/l5blog/resources/views/adminlte/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="http://localhost/l5blog/public/assets/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

    <!-- DataTables -->
    <link rel="stylesheet" href="http://localhost/l5blog/resources/views/adminlte/plugins/datatables/dataTables.bootstrap.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="http://localhost/l5blog/resources/views/adminlte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
    page. However, you can choose any other skin. Make sure you
    apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="http://localhost/l5blog/resources/views/adminlte/dist/css/skins/skin-blue.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>



    ★★test.csv
    "reg_type","reg_name","hostname","object_type","message"
    "b11pp","b12","b13","b14","b15"


    ★★

    category:- | by:ittoocomments(0)trackbacks(0) | -

    スポンサーサイト

    2019.09.17 Tuesday 00:33
    0
      category:- | by:スポンサードリンク | - | - | -
      Comment








         
      Trackback
      この記事のトラックバックURL

      ad
      Calender
        12345
      6789101112
      13141516171819
      20212223242526
      2728293031  
      << October 2019 >>
      Selected entry
      PR
      Category
      Archives
      Recent comment
      • パス指定 SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-4: truncated ¥xXX escape
        久米隆文
      • 円マークが自動変換されてる
        aaaaaa
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        66hills
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        ssd
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        max
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        DOM
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        DOM
      • コンピュータ業界の根本的な変化
        cloud
      • コンピュータ業界の根本的な変化
        Dellの仮想化
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        えちごや
      Recent trackback
      • スマートフォンの法人活用例
        無線LANネットのブログ
      • Yahoo!オークションからのアフィリエイト収入が一気に70%減になってしまい涙目になってる話
        特選情報
      Recommend
      Link
      Profile
      Search
      Others
      Mobile
      qrcode
      Powered
      無料ブログ作成サービス JUGEM