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表单常用验证集合
Jan 16 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
js实现新年倒计时效果
Dec 10 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
Smarty模板语法详解
2019/07/20 PHP
js left,right,mid函数
2008/06/10 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
基于Python List的赋值方法
2018/06/23 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
英文推荐信格式范文
2014/05/09 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis
MySQL中order by的执行过程
2022/06/05 MySQL