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 相关文章推荐
javascript抖动元素的小例子
Oct 28 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php一些公用函数的集合
2008/03/27 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
js parsefloat parseint 转换函数
2010/01/21 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
javascript数组的使用
2013/03/28 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
python 排列组合之itertools
2013/03/20 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
django-csrf使用和禁用方式
2020/03/13 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
高三生物教学反思
2014/01/25 职场文书
司马光教学反思
2014/02/01 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
向女朋友道歉的话
2015/01/20 职场文书
幼师中班个人总结
2015/02/12 职场文书
禁毒主题班会教案
2015/08/14 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript