zoukankan      html  css  js  c++  java
  • 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

     

     

  • 相关阅读:
    centos ppp拨号
    Xen、KVM和VirtualBox比拼
    static用法一
    linux浏览器,邮件客户端,输入法,双屏设置,应用软件,gnome-screenshot/scrot -s截图,office
    OpenGl学习总结
    DICOM医学图像处理:DCMTK在VS2012中的配置
    linux下用mail发送邮件
    (HLS播放器之中的一个)HLS协议之M3U8解析
    tcpdump抓包分析具体解释
    对账简单说
  • 原文地址:https://www.cnblogs.com/lihaiyan/p/4276909.html
Copyright © 2011-2022 走看看