JQuery和PHP结合实现动态进度条上传显示


Posted in Javascript onNovember 23, 2016

Windows 环境下的修改方法

第一步:修改在php5下POST文件大小的限制

1.编修php.ini

找到:max_execution_time = 30 ,这个是每个脚本运行的最长时间,单位秒,改为:max_execution_time = 150

找到:max_input_time = 60,这是每个脚本可以消耗的时间,单位也是秒,修改为:

max_input_time = 300

找到:memory_limit = 128M,这个是脚本运行最大消耗的内存,根据你的需求更改数值,这里修改为:memory_limit = 256M

找到:post_max_size = 8M,表单提交最大数据为 8M,此项不是限制上传单个文件的大小,而是针对整个表单的提交数据进行限制的。限制范围包括表单提交的所有内容.例如:发表贴子时,贴子标题,内容,附件等…这里修改为:post_max_size = 20M

找到:upload_max_filesize = 2M ,上载文件的最大许可大小 ,修改为: upload_max_filesize = 10M (这里的大小根据需求来定)

第二步: Apache环境中的档案上传大小控制

修改位于Apahce目录下的httpd.conf

添加下面内容

LimitRequestBody 10485760

即10M=10*1024*1024,有的文章中提到应改为 600000000

重新启动apache,就可以在设置里看到你要的大小

HTML部分

<form action="index/index/upload" method="POST" enctype="multipart/from-data" id="uploadform" onSubmit="return false">
<div class="inpuys">
<input type="file" name="file" id="uploadfile" value="选择文件" class="cho">
<input type="submit" value="上传" id="submit_btn" class="sub btn btn-info">
</div>
</form>

JS部分

<script type="text/javascript" src="{$Think.config.web_root}js/jquery.min.js"></script>
<script type="text/javascript" src="{$Think.config.web_root}js/jquery.form.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var progressbox=$("#progressbox");
var progressbar=$("#progressbar");
var progress=$("#progress");
var completed="0%";
var options={
beforeSubmit:beforeSubmit,
uploadProgress:OnProgress,
success:afterSuccess,
resetForm:true
};
$("#uploadform").submit(function(){
$(this).ajaxSubmit(options);
return false;
});
function OnProgress(event,position,total,percentComplete ) {
progressbar.width(percentComplete + "%");
progress.html(percentComplete + "%");
}
function afterSuccess(){
$("#output").html("上传完成!!");
}
function beforeSubmit(){
if (!$("#uploadfile").val()) {
$("#output").html("请选择文件!!");
return false;
}
progressbar.width(completed);
progress.html(completed);
}
});
</script>

THINKPHP方法部分

public function upload(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
return "上传成功";
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}

以上所述是小编给大家介绍的JQuery和PHP结合实现动态进度条上传显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用js获取图片原始尺寸
Dec 03 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 #Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 #Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 #Javascript
jquery实现点击页面回到顶部
Nov 23 #Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 #Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 #Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 #Javascript
You might like
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
13个PHP函数超实用
2015/10/21 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
django项目中新增app的2种实现方法
2020/04/01 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
中学生期末评语
2014/02/03 职场文书
植树节标语
2014/06/27 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
硕士学位论文评语
2014/12/31 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript