Maison > Article > interface Web > JS natif télécharger un fichier volumineux afficher la barre de progression-fichier de téléchargement php

JS natif télécharger un fichier volumineux afficher la barre de progression-fichier de téléchargement php

一个新手original: 2017-10-14 10:30:561471parcourir

Modifiez la taille requise dans php.ini :

upload_max_filesize = 8M >

<!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>
    </form>
    <script type="text/javascript">
        var oForm = document.getElementsByTagName(&#39;form&#39;)[0];        
        var oSubmit = $(&#39;submit&#39;);        //如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响        
        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);
                //将百分比显示到进度条                
                $(&#39;parent&#39;).style.display = &#39;block&#39;;
                $(&#39;child&#39;).style.display = &#39;block&#39;;                //将上传进度的百分比显示到child里面                $(&#39;child&#39;).style.width = percent+&#39;%&#39;;
                $(&#39;child&#39;).style.textAlign = &#39;center&#39;;
                $(&#39;child&#39;).innerHTML = percent+&#39;%&#39;;                //判断如果百分比到达100%时候，隐藏掉
                if(percent==100){
                    $(&#39;parent&#39;).style.display = &#39;none&#39;;
                    $(&#39;child&#39;).style.display = &#39;none&#39;;
                }
            }
            xhr.open(&#39;post&#39;,&#39;progress.php&#39;,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(&#39;上传成功&#39;);
                    }else{
                        alert(&#39;上传失败&#39;);
                    }
                }
            }            //阻止表单提交
            return false;
        }    </script></body></html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelle est la différence entre JS et JQUERY ?Article suivant：Quelle est la différence entre JS et JQUERY ?

Articles Liés

Voir plus