zoukankan      html  css  js  c++  java
  • JS实现上传进度条

    文件上传的时候经常需要等待,这个时候可以考虑增加进度条来实现这个技术,下面主要是使用js模拟进度条,记住这是模拟进度条,不是真实的进度条,因为如果是真实的进度条需要实现获取文件的真实大小,以及监听每时每刻文件上传的大小,获得这些数据后,还需要使用js技术把数据传递到前端,貌似目前 哥哥还实现不了这个技术,先使用js模拟一下吧,过几天在研究一下使用php真实的监听文件上传情况,先看一下模拟进度条(再次声明这只是模拟的,不是真实的)


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <HTML> 
    <HEAD> 
    <TITLE> New Document </TITLE> 
    <META NAME="Generator" CONTENT="EditPlus"> 
    <META NAME="Author" CONTENT=""> 
    <META NAME="Keywords" CONTENT=""> 
    <META NAME="Description" CONTENT=""> 
    <style type="text/css"> 
    .spa{ 
    font-size:12px; 
    color:#0066ff; 
    
    } 
    .put{ 
    font-size:12px; 
    font-family:Arial; 
    color:#0066ff; 
    background-color:#fef4d9; 
    padding:0px; 
    border-style:none; 
    } 
    
    .put2{ 
    font-size:12px; 
    color:#0066ff; 
    text-align:center; 
    border-medium; 
    border-style:none; 
    } 
    
    
    </style> 
    </HEAD> 
    
    <BODY> 
    <div id="up"> 
    <span class="spa">载入中,请稍等...</span> 
    <input id="chart" type="text" size="54" class="put" readOnly /> 
    <input id="percent" type="text" size="20" class="put2" readOnly /> 
    </div> 
    
    <div id="ff"> 
    <form name="upload" method="post" action=""> 
    <input type="file" id="f" size="30" /> 
    <input type="button" id="b" value="上传" onclick="count()"/> 
    </form> 
    </div> 
    <script language="javascript"> 
    var bar=0; 
    var line="||"; 
    var amount=""; 
    document.getElementById("up").style.display="none"; 
    function count(){ 
    var f = document.getElementById("f"); 
    var b = document.getElementById("b"); 
    b.disabled  = true; 
    f.disabled  = true; 
    if(f.value==""){ 
    b.disabled  = false; 
    f.disabled  = false; 
    alert("请添加上传文件"); 
    return false; 
    } 
    document.getElementById("up").style.display="inline"; 
    bar = bar+2; 
    amount = amount+line; 
    document.getElementById("chart").value=amount; 
    document.getElementById("percent").value=bar+"%"; 
    if(bar<99){ 
    setTimeout("count()",200); 
    }else{ 
    b.disabled  = false; 
    f.disabled  = false; 
    alert("加载完毕!"); 
    document.getElementById("up").style.display="none"; 
    //	window.location=""; 
    } 
    } 
    
    </script> 
    </BODY> 
    </HTML> 
    


  • 相关阅读:
    HDU 1505 City Game
    HDU 1506 Largest Rectangle in a Histogram
    HDU 1838 Chessboard
    HDU 2512 一卡通大冒险
    HDU 1081 To The Max
    HDU 2845 Beans
    HDU 1422 重温世界杯
    HDU 1231 最大连续子序列
    第6章 接口和实现
    java面向抽象编程样例
  • 原文地址:https://www.cnblogs.com/y0umer/p/2809619.html
Copyright © 2011-2022 走看看