jquery实现分页功能;jqgrid 分页参数传递 收藏 0

php手把手教你做网站（二十四）jquery ajax上传大的附件

上传大的附件分为两种情况，

1. 可以改变服务器配置；
2. 不能改变配置；

第2种使用分片上传

优势：可以突破服务器上传大小的限制，可以web存储上传到哪一块了，在浏览器关闭或者刷新的情况下可以断点续传；

劣势：上传速度慢，在我本地电脑测试，200M的文件，改变配置按照正常方式上传大约需要12到15秒，但是使用第2种分片上传，大约需要40多秒，也就是所需时间是正常上传的3倍，我测试了for循环同时上传几个碎片，电脑直接很卡，点击别的浏览器或者文件夹之类的全部是没有响应，所以放弃了使用循环同时上传多个；

如果上传大的文件实现进度条是很有必要的，否则用户看不到进度会等得不耐烦了。

小的文件只需要2秒左右，是否有进度条没有关系。

第一种，在可以改变服务器配置的前提下

图1 带进度条文件上传

1、配置php.ini

1. post_max_size post数据默认8M
2. upload_tmp_dir 文件上传临时文件（upload_tmp_dir=\”E:\\temp8.0.11\”）
3. upload_max_filesize 上传的大小默认2M
4. max_execution_time 程序超时时间默认30秒

如果上传的文件比较大，以上4点都需要修改，特别是第2点，尽可能配置，否则上传最后会比较慢。

2、iis上传大小限制，可以在web.config直接修改，加入以下代码

<requestLimits maxAllowedContentLength=\”1073741824\” /> 这里是限制的大小，默认大小忘记了，我这里设置的是可以上传1G进行的测试。

3、nginx上传大小限制

1. client_max_body_size 2000m; #upload size 随便写的2000M方便上传1G大小文件测试
2. client_header_timeout 300;
3. fastcgi_connect_timeout 300;
4. fastcgi_send_timeout 300;
5. fastcgi_read_timeout 300;
6. fastcgi_request_buffering off;

我开始想把这些加到location / {}里边，提示错误client_header_timeout不允许放到里边，所以全部加到外边了，也就是server {}里边；

注意下第6点，如果不配置，nginx上传文件会存到缓存，然后再一点一点传到upload_tmp_dir的目录下，导致上传所需时间是iis的2倍。

4、html代码

5、css代码 用来设置进度条

6、js代码(jquery使用监听progress实现进度条功能)

7、后端php处理程序

第二种，不能改变服务器的配置使用分片上传

图2 进度条显示多少片

html，css不变，只是改变js，下面是用到的js代码

代码1：点击事件

代码2：uploadtp方法

php后端处理程序

说明：

1. 返回代码0000上传完成，0001未完成继续上传，其他错误提示；
2. 分片上传不能使用move_uploaded_file，而是使用file_put_contents追加
3. file_put_contents追加用法file_put_contents(\”物理路径+文件名\”,\”追加的信息\”,FILE_APPEND);

nginx上传文件很慢

处理办法：关闭 fastcgi_request_buffering，如果不关闭，上传所需时间至少是iis的2倍；

具体操作：编辑nginx.conf，

server {

fastcgi_request_buffering off;

}

使用INFINITE AJAX SCROLL实现下拉加载效果

现在很多网页都有个体验不错的效果：浏览到页面底部的时候，自动加载下一页内容，也就是下拉加载效果，这种效果可以让用户不用点击“下一页”按钮，也可以实现翻页，无论在PC还是手机上，体验效果都很不错，下面我就介绍一下网站开发的时候如何实现下拉加载效果。

Infinite Ajax Scroll是一款jQuery滚动分页插件(页面滚动到最底部自动异步加载数据)，功能完善，设置简单，目前的版本是2.3.0，个人用户可以免费使用。

首先去infiniteajaxscroll网站下载一个名为jquery-ias.min.js的文件，这个js文件需要jquery支持，一般的网站主题都会引入jquery库，没有的话就手动加一个jquery库。

之后确认一下网站的框架结构，找到四个元素的id或名称：内容块、内容条目、导航栏、下一页。

Infinite Ajax Scroll支持按照ID取值和按照class取值，ID就在名称前加#，class就在名称前加。符号。编辑jquery-ias.min.js文件，在文件尾部加入配置参数代码即可。

举个例子。

一个页面的内容如下：

<div class=\”container\”>

<div class=\”item\”>…</div>

<div class=\”item\”>…</div>

</div>

<div id=\”pagination\”>

<a href=\”page1.html\”>1</a>

<a href=\”page2.html\” class=\”next\”>2</a>

</div>

则 Infinite Ajax Scroll 需要增加的代码如下：

var ias = $.ias({

container: \”.container\”,

item: \”.item\”,

pagination: \”#pagination\”,

next: \”.next a\”

});

// Add a loader image which is displayed during loading

ias.extension(new IASSpinnerExtension);

上面代码最后一行是在加载的时候显示一个加载图标，不加也可以。

对于WordPress来说，不同的模板修改修改的参数不同，但大多数直接设置即可正常工作。

对于Z-Blog来说，就不行了，因为里面没有下一页的标记，需要修改代码，打开c_system_lib.asp文件，找到下面一行：

Template_PageBar=Template_PageBar & \”<span class=\”\”page now-page\”\”>\” & i & \”</span>\”

在下面增加如下几行

elseif i=intNowPage + 1 then

strPageBar=Replace(strPageBar,\”<#pagebar/page/url#>\”,s)

strPageBar=Replace(strPageBar,\”<#pagebar/page/number#>\”,\”<span class=\”\”page\”\”>\”&i&\”</span>\”)

strPageBar=Replace(strPageBar,\”page-numbers\”,\”page-numbers next-page\”)

Template_PageBar=Template_PageBar & strPageBar

之后就有了下一页的选择器next-page了。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com