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的一些注意
Dec 06 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
js命名空间写法示例
Dec 18 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
JS删除对象中某一属性案例详解
Sep 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
用Flash图形化数据(二)
2006/10/09 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
Js中sort()方法的用法
2006/11/04 Javascript
js滚动条多种样式,推荐
2007/02/05 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
python装饰器初探(推荐)
2016/07/21 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Python绘图实现显示中文
2019/12/04 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
文体活动实施方案
2014/03/27 职场文书
大型营销活动计划书
2014/04/28 职场文书
降价通知函
2015/04/23 职场文书