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 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
vue实现单选和多选功能
Aug 11 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
javascript 写类方式之一
2009/07/05 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
使用python实现kNN分类算法
2019/10/16 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python如何查看网页代码
2020/06/07 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
日本语毕业生自荐信
2014/02/01 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
医院节能减排方案
2014/06/13 职场文书
集体生日活动方案
2014/08/18 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
python小程序之飘落的银杏
2021/04/17 Python