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的日期联动实现代码
Feb 24 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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程序员工具
2008/05/26 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
微信小程序中setInterval的使用方法
2017/09/29 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python subprocess库的使用详解
2018/10/26 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
详解python 爬取12306验证码
2019/05/10 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python 实现集合Set的示例
2020/12/21 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js