分页和图片上传

今天学习到的新知识
分页功能得注意点 
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>
posted @ 2017-11-14 11:51  码农的进击  阅读(344)  评论(0编辑  收藏  举报