Ajax带进度条文件上传
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文件代码:
<?php print_r($_FILES); if(isset($_FILES[‘pic‘]) && $_FILES[‘pic‘][‘error‘] == 0) { if($_FILES[‘pic‘][‘tmp_name‘]){ chmod($_FILES[‘pic‘][‘tmp_name‘],0755); echo "<br/>",$_FILES[‘pic‘][‘tmp_name‘]; echo "<br/>","./upload/".$_FILES[‘pic‘][‘name‘]; move_uploaded_file($_FILES[‘pic‘][‘tmp_name‘],"./upload/".$_FILES[‘pic‘][‘name‘]); echo "ok"; } }else exit("faile"); ?>
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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。