Ajax带进度条文件上传
html文件代码:
<html>
<head>
<title>FormData</title>
<script type="text/javascript">
/*进度条需要两个最基础的信息------总大小,已上传大小
解决:在html5中有一个上传过程事件,在事件中可以读取这两个信息 ---- onprogress
具体思路:
在上传过程中,不断的触发函数,函数读取已上传/总大小
不断的更新页面的进度条。
*/
//选择文件时调用
function selectfile(){
//建立一个formdata对象
var fd = new FormData();
//得到文件对象
var pic = document.getElementsByTagName('input')[0].files[0];
//将文件内容追加到表单数据中
//fd.append(pic.name,pic);
fd.append("pic",pic);
//建立html http对象,发送
var xhr = new XMLHttpRequest();
xhr.open('POST','HTML5up.php',true); //post发送
xhr.onreadystatechange = function(){
if(this.readyState == 4){
document.getElementById('debug').innerHTML = this.responseText;
}
}
//利用XHR2的新标准,为上传过程,写一个监听函数
xhr.upload.onprogress = function(ev){
console.log(ev);
if(ev.lengthComputable){
var percent = 100 * ev.loaded/ev.total;
var tex = percent+" total="+ev.total+"<br/>loaded="+ev.loaded + "<hr/>";
document.getElementById('bar').style.width = percent + "%";
document.getElementById('bar').innerHTML = parseInt(percent) + "%";
document.getElementById('debug2').innerHTML = tex;
//alert(percent+" total="+ev.total+"<br/>loaded="+ev.loaded);
}
//alert('上传img');
}
/* //显示预览图片
//建立一个img对象
var tmpimg = document.createElement('img');
//把二进制对象直接读成浏览器显示的资源
tmpimg.src = window.URL.createObjectURL(pic);
//动态创建img显示的标签
document.getElementsByTagName('body')[0].appendChild(tmpimg);
*/
xhr.send(fd);
}
</script>
<style type='text/css'>
img{ width:500px; }
#progress{width:500px; height:15px; border:1px solid green;}
#bar{width:0%; height:100%; background:green;}
</style>
</head>
<body>
<form enctype="multipart/form-data" method="POST">
<input type="file" name="pic" onchange="selectfile();">
</form>
<hr/>
<div id="progress">
<div id="bar"></div>
</div>
<div id="debug2"></div>
<hr/>
<div id="debug"></div>
</body>
</html>
PHP文件代码:
Ajax上传是,还受服务器的限制,下面就是修改服务器的上传大小限制
修改WampServer 的附件上传限制的方法:方法一:修改 php.ini 文件。
相关参数解释:
file_uploads = on ;是否允许通过HTTP上传文件的开关。默认为ON即是开。
upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,如果没指定就会用系统默认的临时文件夹。
upload_max_filesize = 2m ;望文生意,即允许上传文件大小的最大值。默认为2M
post_max_size = 8m ;指通过表单POST给PHP的所能接收的最大值,包括表单里的所有值。默认为8M
max_execution_time = 30 ;每个PHP页面运行的最大时间值(秒),默认30秒
max_input_time = 60 ;每个PHP页面接收数据所需的最大时间,默认60秒
memory_limit = 128m ;每个PHP页面所吃掉的最大内存,默认128M。如果觉得小了,可以设置大点。128够用。
max_execution_time = 600
max_input_time = 600
upload_max_filesize = 32m
post_max_size = 32m
把上述参数修改后,在网络所允许的正常情况下,就可以上传大体积文件了。
方法二,利用.htaccess文件
此法不用直接.修改php.ini,适用于虚拟主机。
配置Apache支持.htaccess
//找到
Options FollowSymLinks
AllowOverride None
//修改为
Options FollowSymLinks
AllowOverride All
//就可以了
在目录下新建一个.htaccess文件,windows默认是不允许这么干的,可以在Dreamweaver的文件管理下新建,就不会了。
.htaccess里写入
php_value post_max_size 12m
php_value upload_max_filesize 12m
php_value max_execution_time 120
php_value max_input_time 240
就OK……
补充解释:
使用ini_set("post_max_size","80M");的方法是行不通的。
post_max_size的可修改范围是PHP_INI_PERDIR。
PHP_INI_PERDIR是域内指令只能在php.ini、httpd.conf或.htaccess文件中修改,故行不通。
php_value name value
设定指定指令的值。仅能用于 PHP_INI_ALL 和 PHP_INI_PERDIR 类型的指令。要清除上一个设定的值,将值设为 none 。
注: 不要用 php_value 来设定布尔值。应该用 php_flag (见下面)来替代。
php_flag name on|off
用于设定布尔值类型的配置指令。仅能用于 PHP_INI_ALL 和 PHP_INI_PERDIR 类型的指令。
php_admin_value name value
设定指定指令的值。不能在 .htaccess 文件中使用。任何在 php_admin_value 中设定的值不能被 .htaccess 或者 virtualhost 中的指令覆盖。要清除上一个设定的值,将值设为 none 。
php_admin_flag name on|off
用于设定布尔值类型的配置指令。不能在 .htaccess 文件中使用。任何在 php_admin_flag 中设定的值不能被 .htaccess 或者 virtualhost 中的指令覆盖。(竹夜心晨)
本文标题:修改WampServer 的附件上传限制的方法
网址:http://www.lxlong.net/archives/9212.html