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> 
    


  • 相关阅读:
    jquery ajax 赋值问题, 后面程序判断逻辑用
    jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决
    学习写了一个点击按钮倒计时的jquery小插件
    点击按钮复制指定代码
    discuz 修改积分策略( 在周期中添加"每周" )
    php获取本周周一、周日时间,上周周一、周日时间,本月第一天,本月最后一天,上个月第一天,最后一天时间
    php用正则判断是否为数字
    discuz 标签详解
    用dwz时, 由于粗心产生的一些问题(记录方便自己查阅)
    yii mailer 扩展发送邮件
  • 原文地址:https://www.cnblogs.com/y0umer/p/2809619.html
Copyright © 2011-2022 走看看