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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
jquery 笔记 事件
Nov 02 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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来处理多个提交任务
2006/10/09 PHP
一个高ai的分页函数和一个url函数
2006/10/09 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python使用multiprocessing创建进程的方法
2015/06/04 Python
用Python编写简单的微博爬虫
2016/03/04 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python中实现词云图的示例
2020/12/19 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
运动会领导邀请函
2014/01/10 职场文书
大学生村官承诺书
2014/03/28 职场文书
创先争优宣传标语
2014/10/08 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL