zoukankan      html  css  js  c++  java
  • ajax利用html5新特性带进度条上传文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="description" content="" />
            <meta name="keywords" content="" />
    
            <script type="text/javascript">
    
    function f1(){
        var mypic = document.getElementById('myhead').files[0];
        var fd = new FormData();
        fd.append("myhead",mypic);
    
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
                alert(xhr.responseText);
            }
        }
    
        //侦查当前附件上传情况
        xhr.upload.onprogress = function(evt){
            //侦查附件上传情况
            //通过事件对象侦查
            //该匿名函数表达式大概0.05-0.1秒运行一次
            //console.log(evt);
            //console.log(evt.loaded);  //已经上传大小情况
            //evt.total; 附件总大小
            var loaded = evt.loaded;
            var tot = evt.total;
            var per = Math.floor(100*loaded/tot);  //已经上传的百分比
            var son =  document.getElementById('son');
            son.innerHTML = per+"%";
            son.style.width=per+"%";
        }
    
        xhr.open("post","./04.php");
        xhr.send(fd);
    }
    
    //立马显示被上传的图片
    function f2(){
        //利用files获得被上传附件(图片)信息
        var mypic = document.getElementById('myhead').files[0];
        //利用mypic获得图像的url地址(二进制源代码)
        //URL  html5新标准属性
        //window.URL.createObjectURL(mypic);
        document.getElementsByTagName('img')[0].src = window.URL.createObjectURL(mypic);
    }
    </script>
    
    <style type="text/css">
    #parent{550px; height:50px; border:5px solid blue;}
    #son {0; height:100%; background-color:red; text-align:center; line-height:50px; font-size:20px; font-weight:bold;}
    </style>
    </head>
    
    
    <body>
        <div id="parent"><div id="son"></div></div>
        用户头像:<input type="file" id="myhead" name="myhead" onchange="f2()"/><br />
        <img src="" alt="" width="200" height="150"/><br />
        <input type="button" value="上传头像" onclick="f1()" /><br />
    </body>
    </html>

  • 相关阅读:
    C#日期与时间
    使用IIS部署WebDAV
    永久有效,最新IntelliJ IDEA 2021.1.1激活破解教程,亲测有效
    LNC(宝元)机床的IP设置和数据采集
    KND(凯恩帝)机床的IP设置
    国密算法SM1-SM4简介
    WPF中根据数据展示不同UI控件的做法
    WPF中ListView滚动到当前行的几种方法
    WPF中对于异步返回的绑定
    .net类库名称空间冲突怎么办?
  • 原文地址:https://www.cnblogs.com/cxchanpin/p/6802554.html
Copyright © 2011-2022 走看看