`
xiaomiya
  • 浏览: 131357 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

用JS模拟实现上传文件加载进度条

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.spa{ font-size:12px; color:#0066ff;}
.put{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;}
.put2{ font-size:12px; color:#0066ff; text-align:center; border-width:medium; border-style:none;}
</style>
</head>

<body>
<div id="up">
    <span class="spa">载入中,请稍后。。。。</span>
    <input id="chart" type="text" size="54" class="put" readonly="readonly" />
    <input id="percent" type="text" size="20" class="put2" readonly="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>
  <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=bar+"%";
      if(bar<99){
          setTimeout("count()",200);
          }
       else{
           b.disabled=false;
           f.disabled=false;
           alert("加载完毕")
           document.getElementById("up").style.display="none";
           }
      }


  </script>
</div>
</body>
</html>

 

 

分享到:
评论

相关推荐

    jQuery模拟页面加载进度条

    本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...

    JS 模拟上传进度条.

    在这个“JS 模拟上传进度条”的示例中,我们将探讨如何使用JavaScript实现这个功能。 首先,我们需要理解上传进度条的基本原理。在HTML5中,`&lt;input type="file"&gt;`元素提供了文件选择的功能,而FileReader API则...

    jQuery数据加载进度条代码.zip

    在本文中,我们将深入探讨如何使用jQuery实现数据加载进度条效果。这个代码示例是基于jQuery库的2.1.0版本,包含了四种不同的进度条动画特效,为用户提供了丰富的视觉体验,使得网页上的数据加载过程更加友好和吸引...

    js页面加载进度条

    通过查看和分析这个文件,我们可以学习到具体的实现方式,包括如何计算加载进度、如何用CSS创建动画以及如何将两者结合以实现页面加载进度条的效果。如果你想要进一步了解或实现这样的效果,建议打开并研究这个示例...

    酷炫的html5进度条加载动画_加载进度条动画特效

    例如,用Canvas绘制自定义形状的进度条,或者使用Web Animations API创建更精细的动画控制。 总的来说,通过结合HTML5的`&lt;progress&gt;`元素、CSS3的过渡和动画,以及JavaScript的动态更新,我们可以轻松创建出各种...

    仿微信网页加载进度条

    "仿微信网页加载进度条"是一种模拟微信应用中加载页面时显示的进度指示器,它通常用于显示网页或内容加载的进度,给用户一个可视化的等待反馈,减少用户的焦虑感。在本文中,我们将深入探讨如何实现这样的功能,并...

    jquery动态页面加载进度条

    "jquery动态页面加载进度条"就是一种优化用户体验的工具,它通过在页面加载过程中展示一个直观的进度条,让用户知道页面正在加载并估计加载完成的时间,从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...

    jquery实现动态加载进度条

    本教程将详细讲解如何利用jQuery这一强大的JavaScript库来实现动态加载进度条。 首先,jQuery是一个轻量级、高性能的JavaScript库,它的API简洁易用,使得开发者能轻松实现复杂的前端交互效果。在实现动态加载...

    ajax 无刷新上传文件带进度条

    SwfUploadDemo这个文件可能是一个示例项目,它使用了Flash技术(SWF文件)来实现上传功能。在过去,Flash常用于跨浏览器的文件上传,因为当时HTML5的File API并不广泛支持。SwfUpload是一个开源库,它可以模拟多文件...

    Loading网页加载进度条动画效果.zip

    要查看和学习这个加载进度条的具体实现,你需要解压文件并打开对应的代码文件进行查看和分析。 总结来说,"Loading网页加载进度条动画效果.zip"是一个结合了jQuery和CSS3技术的网页加载动画解决方案,它通过优雅的...

    canvas实现动态加载进度条

    在微信小程序中,canvas是用于绘制图形的重要组件,它可以让我们实现各种复杂的动态效果,比如本例中的“动态加载进度条”。下面将详细讲解如何利用canvas实现这样的功能。 首先,我们需要了解canvas的基本用法。...

    加载进度条loading动态效果ppt模板.rar

    在IT行业中,动态加载进度条是用户界面设计中不可或缺的一部分,特别是在大文件上传、下载或者复杂数据处理时,它能够提供用户体验的流畅感,让用户了解任务的进展状态。本资源"加载进度条loading动态效果ppt模板....

    基于jQuery实现滑动加载进度条特效源码.zip

    【标题】中的“基于jQuery实现滑动加载进度条特效源码”表明这是一个使用JavaScript库jQuery创建的、用于显示页面加载进度的动态效果。在网页开发中,这种特效通常用于提升用户体验,让用户能够可视化地了解数据加载...

    php+js模拟表单通过XMLHttpRequest实现进度条上传视频

    在本文中,我们将深入探讨如何使用PHP和JavaScript(特别是jQuery)通过XMLHttpRequest对象来实现视频文件的模拟表单上传,并且在上传过程中显示进度条,以及上传完成后自动加载和播放视频的功能。 首先,我们需要...

    iOS8风格loading加载进度条代码(CSS3 JS).zip

    2. **修改CSS属性**:用JavaScript改变CSS的`width`属性,模拟加载进度的增加,从而实现进度条的动态变化。 3. **延迟与定时器**:使用`setTimeout`或`setInterval`函数,控制进度条的更新速度,模拟真实加载过程。 ...

    进度条完美加载进度条

    综上所述,"进度条完美加载进度条"项目提供了一种使用JavaScript和`setTimeout`实现动态进度条的方法,并通过`loader.js`进行了封装,使得在实际应用中调用和管理加载过程变得更加简单和高效。这种技术在网页或应用...

    js+HTML5 canvas 实现简单的加载条(进度条)功能示例.docx

    最后,我们使用`setInterval()`函数每隔一定时间(比如100毫秒)调用`drawProgress()`,模拟加载过程: ```javascript var timer = setInterval(drawProgress, 100); ``` 这样,我们就创建了一个简单的加载条,...

    伪进度条(js特效)

    在网页设计中,进度条是一种常见的用户界面元素,它用于显示任务或操作的完成状态,如数据加载、文件上传或处理过程。"伪进度条"是利用JavaScript实现的一种视觉效果,它并不直接与后台进程关联,而是通过模拟进度来...

Global site tag (gtag.js) - Google Analytics