JS原生上传大文件显示进度条-php上传文件

一个新手

发布： 2017-10-14 10:30:56

原创

1818人浏览过

在php.ini修改需要的大小：upload_max_filesize = 8M post_max_size = 10M memory_limit = 20M

<!DOCTYPE html><html><head>
    <title>原生JS大文件显示进度条</title>
    <meta charset="UTF-8">
    <style type="text/css">
        #parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
        #child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
    </style>
    <script type="text/javascript">
        function $(id){            
        return document.getElementById(id);
        }    </script></head><body>
    <form action="" method="post">
        <p id="parent">
            <p id="child"></p>
        </p>
        <p>上传文件:<input type="file" name="file"></p>    
        <p><input type="submit" value="提交" id="submit"></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11081">
                            <img src="https://img.php.cn/upload/webcode/000/000/001/176489460764655.jpg" alt="浚心时尚购物商城程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11081">浚心时尚购物商城程序</a>
                            <p>时尚购物程序v1.01、全立体设计。此系统由3个Flash动画为主线（正式版带原文件），设计更形象，网站更有吸引力。这种设计在网店系统内绝无仅有，使您的网店与众不同。2、内置音乐播放器，简单灵活的操作即可完成设置，前台任意调用。并带详细说明文件，一看就懂。合理使用此功能，可使网站更富渲染力。3、支持多图显示，每件产品最多可以上传9张图片。4、后台功能强大，销售管理，财务管理，在线支付平台管理等功能</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="浚心时尚购物商城程序">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11081" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="浚心时尚购物商城程序">
                        </a>
                    </div>
                
    </form>
    <script type="text/javascript">
        var oForm = document.getElementsByTagName('form')[0];        
        var oSubmit = $('submit');        //如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响        
        oSubmit.onclick = function(){            
        try{                
        var xhr = new XMLHttpRequest();
            }catch(e){                
            var xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            xhr.upload.onprogress = function(e){                
            var ev = e || window.event;                
            var percent = Math.floor((ev.loaded / ev.total)*100);        
                // console.log(percent);
                //将百分比显示到进度条                
                $('parent').style.display = 'block';
                $('child').style.display = 'block';                //将上传进度的百分比显示到child里面                $('child').style.width = percent+'%';
                $('child').style.textAlign = 'center';
                $('child').innerHTML = percent+'%';                //判断如果百分比到达100%时候，隐藏掉
                if(percent==100){
                    $('parent').style.display = 'none';
                    $('child').style.display = 'none';
                }
            }
            xhr.open('post','progress.php',true);            
            var form = new FormData(oForm);
            xhr.send(form);
            xhr.onreadystatechange = function(){                
            if(xhr.readyState==4 && xhr.status==200){
                    eval("var obj ="+xhr.responseText);                    
                    if(obj.status){
                        alert('上传成功');
                    }else{
                        alert('上传失败');
                    }
                }
            }            //阻止表单提交
            return false;
        }    </script></body></html>

登录后复制

<?php    //开始上传
    //注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
    //我们不能直接修改文件的编码，只能临时修改一下php的编码
    $dst_file = $_FILES['file']['name'];    
    $dst_file = iconv('utf-8', 'gbk', $dst_file);    
    if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){        
    $data['status'] = 1;
    }else{        
    $data['status'] = 0;
    }    echo json_encode($data);

登录后复制

以上就是JS原生上传大文件显示进度条-php上传文件的详细内容，更多请关注php中文网其它相关文章！