Jquery进度条

最新推荐文章于 2023-04-10 08:55:17 发布
最新推荐文章于 2023-04-10 08:55:17 发布
阅读量523 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shellin_f/article/details/78088059
版权

Jquery我基本不用的，只会基本API，我一般都是用原生的写。

<body>
	<div class="box">
		<div class="content"></div>
	</div>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
		var num=50;
		$(".content").css("width",num+"%");
	</script>
</body>

定位什么就不写了。就这样的直接改他的宽度。  我真不知道还能怎么写。


后台获取数据修改宽度。

AJAX简单实现：

由于可能会出现跨域的情况，所以使用了jsonp

 但是  我也知道为什么还是跨域了.

                         

$.ajax({ 
	type : "get", 
	async:false, 
	url : "./1.txt", 
    	dataType : "jsonp",//jsonp数据类型 
    	jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数 
    	success : function(data){ 
    		$(".content").css("width",data+"%") 
    	}, 
    	error:function(){ 
    		alert('fail'); 
    	} 
});


解决跨域问题

window.domain   jsonp      


原生ajax：

var xhr=new XMLHTTPRequest();


xhr.onreadystatechange=function(){

if((xhr.status==200&&readystatus==4){

alert(xhr.responseText);

}

}

 xhr.open("get","./1.txt"); 

xhr.send(null);




readystates:

0：未初始化  no open

1：启动    open no send

2：发送   send no response

3：接受  response no finished

4：完成   finished


响应之前取消ajax  xhr.abort();




 我也不知道我在干什么。今天就这样吧。





Shellin_F
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现进度条状态展示
11-21
本文实例为大家分享了jquery实现进度条状态展示的具体代码，供大家参考，具体内容如下 如上图所示，由于项目需要，需要做一个状态展示，当点击的时候填满整个长度，你需要下载jquery，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D
jquery_uploadify实现的下载进度条
07-23
最基本的jquery uploadify 的文件上传，struts2版。其中包含jquery uploadify资源包。保证代码的运行。拿出来和大家分享。
ajax实时返回进度信息,jquery+ajax实现异步上传文件显示进度条的方法
weixin_28841265的博客
08-05 644
jquery+ajax实现异步上传文件显示进度条的方法发布时间：2020-08-19 10:52:12来源：亿速云阅读：116作者：小新jquery+ajax实现异步上传文件显示进度条的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！前言：今天项目中加了一个上传文件加进度条的需求，我就搞了一下。时间宝贵不多说，直...
jQuery进度条的使用方法
ness1981的博客
05-29 140
下载jqueryprogressbar.js 源码如下： (function($) {        //Main Method     $.fn.reportprogress = function(val,maxVal) {                    var max=100;         if(maxVal)             max=maxVal;         r...
jQuery UI 实例 - 进度条（Progressbar）
unber的博客
04-10 628
jQuery UI 进度条（Progressbar） - 自定义标签left: 50%;top: 4px;
jquery 进度条
12-22
该程序采用了jquery框架，实现了小文件上传。 两个地方需要解释 第一，如何知道监听的这个文件就是上传的这个文件实现机制很简单，就是让asp.net产生一个唯一的guid，这个id序号是唯一的，通过ajax取出来赋值给一个...
jQuery 进度条
11-03
jQuery 进度条
jQuery进度条插件设置百分比进度条样式代码
10-25
jQuery进度条插件设置百分比进度条样式代码 jQuery进度条插件设置百分比进度条样式代码
jQuery进度条插件彩色样式代码
06-24
jQuery进度条插件彩色样式代码是一款可设置百分比，颜色，高度，长度，圆形形状等。
jQuery 页面载入进度条实现代码
12-09
上图展示了传统 WordPress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。 如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。 先来看一个演示：地址。 要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置： 代码如下:<div id=”loa
jquery进度条
11-30
简单易懂的jquery进度条制作，方便学习和使用，启发思路。
jq/h5 实现实时获取大文件下载进度
向宇
09-02 836
jq/h5 实现实时获取大文件下载进度
jq 上传下载进度条
weixin_30908649的博客
05-18 134
里面只演示了下载的，挂载的是我的七牛服务器上的内容，上传事件和下载是一模一样的，为了大家不乱上传东西到我的服务器，而且我的服务器容量也不大，这里只展示了下载。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
jquery进度条_jQuery进度栏
cunchi8090的博客
07-21 954
jquery进度条Introduction 介绍 A frequently asked question goes something like this: "I am running a long process in the background and I want to alert my client when the process finishes. How can I se...
jq进度条
weixin_30767835的博客
10-13 293
<!doctype html><html><head><meta charset="utf-8"><title>JQuery之进度条</title> <!--加载google的jquer库y--><script src="http://ajax.googleapis.com/ajax/libs/j...
jQuery 进度条实现
L221545的博客
06-16 2729
jQuery 进度条实现 1、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <script src="./js/jquery-1.12.4.js"></script> <style> #box { width:
jquery_进度条
m0_58451019的博客
04-27 1688
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ProgressBar{ width: 100%; height: 30px; background-color: aquamarine; border-radius: 40px; .
node-v9.2.1-linux-x86.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v9.1.0-linux-s390x.tar.xz
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
asp.net jquery 进度条上传
05-14
ASP.NET jQuery进度条上传是一种常见的网页上传文件功能。通过前端jQuery插件和后端ASP.NET技术，实现了文件上传过程中的进度条展示，提高了用户体验和操作效率。具体实现方式如下： 1. 前端实现 使用jQuery的ajaxForm插件，结合jQueryUI的progressbar插件，进行文件上传进度条的展示。在HTML页面上添加上传表单和进度条，通过ajaxForm设置表单提交事件，实现文件上传过程中进度条的实时更新。代码如下： ``` <form id="uploadForm" enctype="multipart/form-data" method="post" action="UploadFile.ashx"> <input type="file" name="fileUpload" /> <input type="submit" value="上传" /> </form> <div id="progressBar"></div> ``` ``` $("#uploadForm").ajaxForm({ beforeSend: function() { $("#progressBar").progressbar({ value: 0 }); }, uploadProgress: function(event, position, total, percentComplete) { $("#progressBar").progressbar({ value: percentComplete }); }, success: function() { $("#progressBar").progressbar({ value: 100 }); alert("上传成功！"); }, error: function() { alert("上传失败！"); } }); ``` 2. 后端实现 在ASP.NET中，通过HttpHandler实现文件上传处理，从request对象中获取上传的文件信息，根据文件大小和上传进度，实时更新进度条的值。代码如下： ``` <%@ WebHandler Language="C#" Class="UploadFile" %> using System; using System.Web; public class UploadFile : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; HttpPostedFile file = context.Request.Files["fileUpload"]; int fileSize = file.ContentLength; int bytesRead = 0; byte[] buffer = new byte[8192]; using (System.IO.Stream stream = file.InputStream) using (System.IO.BinaryReader reader = new System.IO.BinaryReader(stream)) using (System.IO.MemoryStream ms = new System.IO.MemoryStream()) { double percentComplete = 0; int totalRead = 0; while ((bytesRead = reader.Read(buffer, 0, buffer.Length)) > 0) { ms.Write(buffer, 0, bytesRead); totalRead += bytesRead; percentComplete = (double)totalRead / fileSize * 100; context.Response.Write(percentComplete.ToString()); } } } public bool IsReusable { get { return false; } } } ``` 综上，ASP.NET jQuery进度条上传，通过前后端技术的组合应用，在网页上传过程中有效展示文件上传进度和结果，提升了用户的体验感和操作效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值