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 相关文章推荐
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
Angular2库初探
Mar 01 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
班组安全员工作职责
2014/02/01 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书