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 ;指通过表单POSTPHP的所能接收的最大值,包括表单里的所有值。默认为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.inihttpd.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

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。