分頁和圖片上傳

今天學習到的新知識

分頁功能得注意點 

一、使用bootstrapTable框架

    處理過程

    前臺bootstrapTable框架能夠設置初始化加載頁面，默認第一頁(pageNumber:1)，每頁記錄行數(pageSize)，以及可供選擇的每頁行數(pageList[10,15,50])

    還有就是page這個是控制當前頁號，通常不須要修改。而後page和pageSize參數傳到後臺經過paginate($pageSize)函數進行處理，若是數據庫中的數據少於$pageSize那麼將不會顯示上一頁和下一頁，由於該div的display設置的是none，反之page也會起做用，執行的部分sql語句爲(limit 5 offset 0)意義是查詢五條數據，從第一條開始。

 

二、不使用bootstrapTable框架

   雖然處理過程當中使用到的函數相似

   後臺執行的過程

  $data = Article::orderBy( 'id','desc' )->paginate(10);

  前臺顯示的過程

 <div class="page_list">

      {{$data->links()}}
 </div>

 

縮略圖的上傳

 (1) 使用到的一個jquery.uploadify.min.js

/**
 * 圖片上傳方法 
 */
public function upload(){
    $file = Input::file( 'Filedata' );//// 不一樣環境可能獲取方式有點不一樣，能夠下打印觀察一下 dd(Input())
    if( $file->isValid() ){//檢驗一下上傳的文件是否有效
        $entension = $file->getClientOriginalExtension();//上傳文件的後綴
       // 文件名。格式：時間戳 + 6位隨機數 + 後綴名
        $newName = date('YmdHis').mt_rand(100,999).'.'.$entension;//沒後綴名的文件
        $path = $file->move( base_path().'/uploads/',$newName );//路徑
        $filepath = 'uploads/'.$newName;
        return $filepath;
    }
}

<tr>

<th>縮略圖：</th>
<td>

    <script src="{{asset( 'resources/org/uploadify/jquery.uploadify.min.js' )}}" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="{{asset( 'resources/org/uploadify/uploadify.css' )}}">
    <input type="text" size="50" name="art_thumb">
    <input id="file_upload" name="file_upload" type="file" multiple="true">
</td>
<script type="text/javascript">
    <?php $timestamp = time();?>
    $(function() {
                $('#file_upload').uploadify({
　　　　　　　　　    // Laravel表單提交必需參數_token，防止CSRF
                    'formData'     : {
                        'timestamp' : '<?php echo $timestamp;?>',
                        '_token'     : '{{csrf_token()}}',
                    },
                    'buttonText':'圖片上傳',
                    'swf'      : '{{asset( 'resources/org/uploadify/uploadify.swf' )}}',//// 引入Uploadify 的核心Flash文件
                    'uploader' : '{{url( "admin/upload" )}}',//路由地址
                    'onUploadSuccess' : function(file, data, response) {//回調成功
                        $( '#art_thumb_v' ).attr( 'src','/'+data).css( {'width':'350px','heigth':'50px'} );
                        $( 'input[name="art_thumb"]' ).val( data );
                    }
　　　　　　　　　 

  　　　　　　　　　　'onUploadError': function(file, errorCode, errorMsg, errorString) { // 上傳失敗回調函數

                 $('#picshow').attr('src', '').hide();

                 $('#file_upload).val('');

                 alert('上傳失敗，請重試！');

             }

                });
            });
</script>
<style>
    .uploadify{
        display:inline-block;
    }
    .uploadify-button{border:none;border-radius:5px;margin-top:8x;}
    table.add_tab tr td span.uploadify-button-text{color:#fff;margin:0}
</style>

</tr>
<tr>
    <th></th>
    <td>
        <img id="art_thumb_v" alt="" >
    </td>
</tr>