dong瓜

导航

ajax-属性、原理、实现html5进度条上传文件

一、远古ajax实现方式如下：

1、前端请求后台，后台设置返回 http状态码204
2、运用img图片（或css/javascript等）的加载机制，请求后台
3、post提交数据，运用iframe标签，能post提交，且页面不刷新

二、现代ajax（运用XMLHttpRequest）：

<html>
    <head>
    <meta charset="utf-8">
        <script type="text/javascript">
            //创建http请求
            function createHttp(){
                var xml = null;
                if(window.XMLHttpRequest){
                    xml = new XMLHttpRequest(); //现在主流浏览器，包括IE7和以上版本
                }else if(window.ActiveXObject){
                    xml = new ActiceXObject('Microsoft.XMLHTTP');   //兼容IE6的浏览器
                }
                return xml;
            }

            //构造发送请求
            function httpStart(){
                var xml = createHttp(); //创建http对象
                xml.open('GET','./2020-02-22.php',true); //第一个参数：设置请求方式， 第二个参数：设设置请求  第三个参数：设置同步还是异步
                xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');  //设置为post请求, 必须在open() 之后、send() 之前调用setRequestHeader
                xml.send(null); //设置请求发送的数据,数据的格式：像get传参 key1=value1&key2=value2
                xml.onreadystatechange = function(){ //请求的状态每次变化都会触发这个函数
                    var state = this.readyState;   //请求的状态值0-1-2-3-4 5个代表值，其中4代表成功
                    if(state == 4){
                        console.log('请求状态码：'+state)
                        var text = this.responseText;  //获取返回的主体信息
                        console.log('返回主体：'+text)
                        var response = this.response;
                        console.log('返回信息：'+response)
                        var responseType = this.responseType;
                        console.log('返回数据类型：'+responseType)
                        var status = this.status;
                        console.log('返回的状态码：'+status)
                        var statusText = this.statusText;
                        console.log('返回的状态信息：'+statusText)
                        var responseXML = this.responseXML;
                        console.log('返回的xml信息：'+responseXML) //返回xml类型对象
                        var getResponseHeader = this.getResponseHeader('Content-length'); //http返回的属性名
                        console.log('返回请求的数据长度：'+getResponseHeader)
                        var getAllResponseHeaders = this.getAllResponseHeaders();
                        console.log('返回请求的全部信息：'+getAllResponseHeaders)
                    }
                }
            }
        </script>
    </head>
    <body>
        <button onclick="httpStart()">点击我</button>
    </body>
</html>

三、HTML5简单带进度条的文件上传

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <script type="text/javascript">
        function selfile(){
            var div2 = document.getElementById('div2');
            var file = document.getElementById('file').files[0];//html5新属性，获取上传文件对象
            var fm = new FormData(); //html5新属性，创建表单对象
            fm.append('file',file);
            var xml = new XMLHttpRequest(); //创建请求
            xml.open('POST','dfadf.php',true);
            xml.upload.onprogress = function (ev){//绑定上传的文件的监听事件
                if(ev.lengthComputable){//开始上传的标志
                    var progress = 100*ev.loaded/ev.total;//上传文件的大小/文件总大小
                    div2.style.width = progress + '%';
                    div2.innerHTML = parseInt(progress) + '%';
                }
            }
            xml.send(fm);
        }
    </script>
    <style type="text/css">
    #div1{
        width:500px;
        height:30px;
        border: 1px solid green;
    }
    #div2{
        width: 0%;
        height:100%;
        background: green;
    }
    </style>
</head>
    <body>
        <h1>html5进度条文件上传</h1>
        <div id="div1">
            <div id="div2"></div>
        </div>
        <input id="file" type="file" name="点击上传" onchange="selfile();" >
    </body>
</html>

 

posted on 2020-02-27 16:51  dong瓜(TreeSky)  阅读(478)  评论(0)  编辑  收藏  举报