Utilisez HTML5 pour implémenter le téléchargement de fichiers asynchrone, prendre en charge plusieurs domaines et télécharger une barre de progression-Tutoriel H5-php.cn

Utilisez HTML5 pour implémenter le téléchargement de fichiers asynchrone, prendre en charge plusieurs domaines et télécharger une barre de progression

高洛峰

Libérer： 2017-03-24 15:27:15

original

2656 Les gens l'ont consulté

L'éditeur suivant vous proposera un article qui utilise HTML5 pour télécharger des fichiers de manière asynchrone, prend en charge plusieurs domaines et dispose d'une barre de progression de téléchargement. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour jeter un œil

Préparation du serveur pour IIS

Vous devez définir l'en-tête de réponse HTTP dans IIS, comme indiqué dans sur la figure, ajoutez les paramètres suivants, ajoutez ceci "Access-Control-Allow-Origin". Ce n'est qu'en ajoutant cette ligne que la prise en charge entre domaines peut être prise en charge. Sinon, les navigateurs Chrome signaleront une erreur

Utilisez HTML5 pour implémenter le téléchargement de fichiers asynchrone, prendre en charge plusieurs domaines et télécharger une barre de progression .

Utilisez HTML5 pour implémenter le téléchargement de fichiers asynchrone, prendre en charge plusieurs domaines et télécharger une barre de progression

Code de la page :

Code XML/HTMLCopier le contenu dans le presse-papiers

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    <meta name="format-detection" content="telephone=no">  
    <meta name="msapplication-tap-highlight" content="no">  
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">  
    <title>Html5上传文件</title>  
</head>  
<body>  
    <p class="app">  
        <h1>Html5上传文件测试，带进度条</h1>  
        <p>  
            <input type="file" value="" id="fileInput" name="files" onchange="fileSelected()" />  
            <p style="margin:30px;">  
                <input type="button" value="上传" onclick="uploadFile()" />  
            </p>  
            <p style="margin:30px;">  
                <p id="fileName"></p>  
                <p id="fileSize"></p>  
                <p id="fileType"></p>  
            </p>  
            <p style="margin:30px;width:500px;height:15px;border:1px solid #aeaeae;">  
                <p id="progress" style="background:#4cff00;height:15px;width:0%;"></p>  
                <p id="percentNumber"></p>  
            </p>  
            <p style="margin:30px;">  
                <p id="msg"></p>  
            </p>  
        </p>  
    </p>  
    <script type="text/javascript">  
        function fileSelected() {   
            //重置状态显示   
            document.getElementById("msg").innerHTML = "";   
            document.getElementById(&#39;percentNumber&#39;).innerHTML = &#39;&#39;;   
            document.getElementById("progress").style.width = "0%";   
            var file = document.getElementById(&#39;fileInput&#39;).files[0];   
            if (file) {   
                var fileSize = 0;   
                if (file.size > 1024 * 1024)   
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + &#39;MB&#39;;   
                else   
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + &#39;KB&#39;;   
                document.getElementById(&#39;fileName&#39;).innerHTML = &#39;Name: &#39; + file.name;   
                document.getElementById(&#39;fileSize&#39;).innerHTML = &#39;Size: &#39; + fileSize;   
                document.getElementById(&#39;fileType&#39;).innerHTML = &#39;Type: &#39; + file.type;   
            }   
        }   
  
  
        function uploadFile() {   
            var fd = new FormData();   
            fd.append("fileInput", document.getElementById(&#39;fileInput&#39;).files[0]);   
            var xhr = new XMLHttpRequest();   
            xhr.upload.addEventListener("progress", uploadProgress, false);   
            xhr.addEventListener("load", uploadComplete, false);   
            xhr.addEventListener("error", uploadFailed, false);   
            xhr.addEventListener("abort", uploadCanceled, false);               
            xhr.open("POST", "http://10.0.0.200:9001/Home/Upload");//修改为自己服务器接口地址   
            //xhr.setRequestHeader("Access-Control-Allow-Origin", "*");//需要在IIS里面配置，就可以跨域请求了   
            //xhr.setRequestHeader("Content-Type", "multipart/form-data");   
            xhr.send(fd);   
        }   
        function uploadProgress(evt) {   
            if (evt.lengthComputable) {   
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);   
                document.getElementById(&#39;percentNumber&#39;).innerHTML = percentComplete + &#39;%&#39;;   
                var jindutiao = document.getElementById("progress");   
                jindutiao.style.width = percentComplete + "%";   
            }   
            else {   
                document.getElementById(&#39;percentNumber&#39;).innerHTML = &#39;不支持进度计算&#39;;   
            }   
        }   
        function uploadComplete(evt) {   
            //evt.target.responseText   
            document.getElementById("msg").innerHTML = "上传成功";   
        }   
        function uploadFailed(evt) {   
            document.getElementById("msg").innerHTML = "上传过程中有一个错误";   
        }   
        function uploadCanceled(evt) {   
            document.getElementById("msg").innerHTML = "用户取消了上传或者浏览器删除了连接";   
        }   
    </script>  
</body>  
</html>

Copier après la connexion

L'article ci-dessus utilise HTML5 pour implémenter le téléchargement de fichiers asynchrone, prend en charge plusieurs domaines et dispose d'une barre de progression du téléchargement. Il s'agit de tout le contenu partagé par l'éditeur. . J'espère que cela pourra vous donner une référence et j'espère que vous en lirez davantage sur le site Web chinois de Support PHP.

Pour plus d'informations sur l'utilisation de HTML5 pour télécharger des fichiers de manière asynchrone, prendre en charge plusieurs domaines et disposer d'une barre de progression de téléchargement, veuillez prêter attention au site Web PHP chinois pour les articles connexes !