0
点赞
收藏
分享

微信扫一扫

Ajax带进度条文件上传

雨鸣静声 2022-03-30 阅读 40


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




举报

相关推荐

0 条评论