分页和图片上传

今天学习到的新知识

分页功能得注意点 

1、使用bootstrapTable框架

    处理过程

    前台bootstrapTable框架可以设置初始化加载页面，默认第一页(pageNumber:1)，每页记录行数(pageSize)，以及可供选择的每页行数(pageList[10,15,50])

    还有就是page这个是控制当前页号，一般不需要修改。然后page和pageSize参数传到后台通过paginate($pageSize)函数进行处理，如果数据库中的数据少于$pageSize那么将不会显示上一页和下一页，因为该div的display设置的是none，反之page也会起作用，执行的部分sql语句为(limit 5 offset 0)意义是查询五条数据，从第一条开始。

 

2、不使用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>