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数组操作学习总结
Nov 04 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
前台js调用后台方法示例
Dec 02 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
VUE中使用MUI方法
Feb 12 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
python自动格式化json文件的方法
2015/03/11 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
小车司机岗位职责
2013/11/25 职场文书
寒假实习自荐信
2014/01/26 职场文书
中学教师请假制度
2014/02/03 职场文书
个人委托书如何写
2014/09/25 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
信息技术研修心得体会
2016/01/08 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
python中的装饰器该如何使用
2021/06/18 Python