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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
js实现右键自定义菜单
Dec 03 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php的curl封装类用法实例
2014/11/07 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
深入分析PHP设计模式
2020/06/15 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
用Python编写web API的教程
2015/04/30 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
《泉水》教学反思
2014/04/11 职场文书
健康教育评估方案
2014/05/25 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技