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中eval详解
Mar 30 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
ES6中的Javascript解构的实现
Oct 30 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在linux下检测mysql同步状态的方法
2015/01/15 PHP
jquery中动态效果小结
2010/12/16 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Python简单实现区域生长方式
2020/01/16 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
数控专业毕业生求职信范文
2013/09/21 职场文书
自我鉴定范文300字
2013/10/01 职场文书
村委会主任先进事迹
2014/01/15 职场文书
大学毕业自我评价
2014/02/02 职场文书
技能比赛获奖感言
2014/02/14 职场文书
国窖1573广告词
2014/03/21 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
环境卫生标语
2015/08/03 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
python实现手机推送 代码也就10行左右
2022/04/12 Python