suchen

Heim >Web-Frontend >js-Tutorial >JS natives Hochladen großer Dateien, Anzeige des Fortschrittsbalkens und PHP-Upload-Datei

JS natives Hochladen großer Dateien, Anzeige des Fortschrittsbalkens und PHP-Upload-Datei

一个新手
一个新手Original
2017-10-14 10:30:561488Durchsuche

Ändern Sie die erforderliche Größe in 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>

Das obige ist der detaillierte Inhalt vonJS natives Hochladen großer Dateien, Anzeige des Fortschrittsbalkens und PHP-Upload-Datei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist der Unterschied zwischen JS und JQUERY?Nächster Artikel：Was ist der Unterschied zwischen JS und JQUERY?

In Verbindung stehende Artikel

Mehr sehen