<!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-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 />
<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动态进度条插件的示例及下载，可设定走动速度，限定时间的动态进度条效果，放在网页上也是很漂亮的效果，演示页面一共演示了三种速度的进度条，进度速度可以自己调节，旁边可显示网络速度，用在上传...
在JavaScript中实现文件上传进度条是一项重要的用户交互优化工作，它可以显著提升用户体验，尤其是在处理大文件上传时。本文将深入探讨如何实现这一功能，主要涉及以下几个关键知识点： 1. **进度条的实现**：...
在JavaScript的世界里，实现上传进度条功能是一项常见的需求，尤其在现代Web应用中，用户界面的交互性与体验性越来越受到重视。一个优秀的上传进度条不仅能让用户了解文件上传的状态，还能提供良好的反馈，增强用户...
Layui实现文件上传进度条 Layui是一个优秀的前端框架，它提供了很多实用的UI组件和功能之一就是进度条组件。今天我们将探讨如何使用Layui实现文件上传进度条。 进度条组件 Layui的进度条组件是一个轻量级的UI组件...
"JQuery和Servlet实现上传进度条"是一个常见的技术方案，它能够显著提升用户对上传过程的感知，提供实时的进度反馈，减少用户的等待焦虑。下面我们将深入探讨这个主题。 首先，JQuery是一个流行的JavaScript库，它...
在这个“JS 模拟上传进度条”的示例中，我们将探讨如何使用JavaScript实现这个功能。 首先，我们需要理解上传进度条的基本原理。在HTML5中，`<input type="file">`元素提供了文件选择的功能，而FileReader API则...
本篇文章将深入探讨如何使用JavaScript实现上传文件的进度条功能。 首先，我们需要理解HTML5引入的File API，它是实现文件上传进度的关键。File API允许我们访问和操作用户选择的文件，包括读取文件内容、获取文件...
总结来说，jQuery实现的进度条插件是通过结合CSS样式和JavaScript动画来创建的，可以方便地集成到各种项目中，特别是在AJAX操作中，如文件上传，提供实时的进度反馈。开发这样的插件不仅提升了界面的交互性，也使得...
"伪进度条"是利用JavaScript实现的一种视觉效果，它并不直接与后台进程关联，而是通过模拟进度来提供用户体验上的反馈。这种特效可以增加用户对网站交互的感知，提高其满意度。下面我们将详细讨论如何使用JavaScript...
本文将详细解析如何利用PHP和JavaScript（JS）结合实现文件上传过程中的进度条操作，这不仅提升了用户交互体验，还使得整个上传过程更加透明可控。 ### PHP与JS实现进度条的原理 在Web应用中，文件上传通常是由...
### 使用JavaScript实现文件上传进度条 #### 一、概述 在Web开发中，为了提升用户体验，经常需要在用户上传文件时展示一个进度条来显示上传的进度。通过使用JavaScript，我们可以轻松地实现实时更新进度条的效果。...
"Ajax和C#实现上传进度条"这个主题聚焦于如何利用这两种技术为文件上传过程提供实时反馈，提升用户对长时间操作的感知。Ajax（Asynchronous JavaScript and XML）是用于创建动态网页的一种技术，它允许在不刷新整个...
在Java Struts2框架中实现文件上传进度条显示，主要涉及到的技术点包括Struts2的文件上传、Ajax异步通信以及前端进度条组件的使用。下面将详细讲解这些知识点。 首先，Struts2的文件上传功能是通过Struts2提供的`...
AJAX（Asynchronous JavaScript and XML）技术的出现，使得非刷新页面的交互成为可能，同时也为实现上传进度条提供了方案。本教程将深入探讨如何使用AJAX实现文件上传进度条功能。 首先，理解AJAX的基本原理是关键...
无刷新实现上传文件时的进度条. 调用upfile函数。任务执行完后调用changekey函数。更改背景调用_syspro。
### 使用SSH+Ajax实现上传进度条的技术解析 #### 一、技术背景介绍 在Web开发领域，用户上传大文件时的体验优化一直是重要的研究方向之一。传统的文件上传方式往往缺乏实时反馈机制，使得用户在上传过程中无法获知...
SwfUpload通过回调函数与JavaScript交互，将上传进度信息传递到前端，然后在网页上动态更新进度条，实现可视化效果。 此外，SwfUpload还支持上传操作的控制。用户可以在上传过程中随时暂停、继续或者取消上传，这...
本文将详细介绍如何使用JavaScript（JS）来模拟实现一个上传进度条，无需后台页面参与，但需注意服务器环境对跨域策略的影响。 首先，我们需要明白，前端的文件上传通常涉及两个主要步骤：选择文件和发送文件数据到...
4. **修改ajaxfileupload.js**: 要实现上传进度条，我们需要修改AJAXFileUpload的源代码，添加处理上传进度的回调函数。在源代码中，可能需要找到处理文件上传事件的地方，然后添加或修改代码来监听文件上传的进度。...
"Ajax+jsp实现上传进度条"是一个典型的提升用户体验的技术方案。Ajax（Asynchronous JavaScript and XML）和JSP（JavaServer Pages）结合使用，可以创建出无刷新、动态更新的网页，其中上传进度条功能就是一种常见且...