如何在提交多个数据时显示百分比进度条

如何使用PHP Ajax在使用HTML表单提交多个数据时使用百分比添加进度条。</ p>
</ div>

展开原文

原文

How can I add a progress bar with the percentage when submitting multiple data with HTML form by using PHP Ajax.

douya7282
douya7282 你能举个例子吗?
大约 2 年之前 回复
douxianliu6756
douxianliu6756 1/创建进度条:一个容器+一个div表示进度,2/提交数据calcul后用户发送的数据百分比并更改进度条的宽度。例如。10个问题,用户发送5个问题的数据->进度条是50%。
大约 2 年之前 回复

1个回答

Here is an example :

$(document).ready(function() {
  $("input").on("change", function() {
    var size = $("input:checked").length;
    var progress = size * 10 + "%";
    
    $(".progress").css("width", progress);
  });
});
.container {
  width: 200px;
  height: 30px;
  border: 1px solid black;
}
.progress {
  height: 100%;
  width: 0;
  background-color: red;
  transition: 0.4s ease;
}
.block {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="progress"></div>
</div>

<form>
<div class="block">
  <input id="one"   name="one"   type="checkbox"><label for="one">One</label></div>
<div class="block">
  <input id="two"   name="two"   type="checkbox"><label for="two">Two</label>
</div>
<div class="block">
  <input id="three" name="three" type="checkbox"><label for="three">Three</label>
</div>
<div class="block">
  <input id="four"  name="four"  type="checkbox"><label for="four">Four</label>
</div>
<div class="block">
  <input id="five"  name="five"  type="checkbox"><label for="five">Five</label>
</div>
<div class="block">
  <input id="six"   name="six"   type="checkbox"><label for="six">Six</label>
</div>
<div class="block">
  <input id="seven" name="seven" type="checkbox"><label for="seven">Seven</label>
</div>
<div class="block">
  <input id="eight" name="eight" type="checkbox"><label for="eight">Eight</label>
</div>
<div class="block">
  <input id="nine"  name="nine"  type="checkbox"><label for="nine">Nine</label>
</div>
<div class="block">
  <input id="ten"   name="ten"   type="checkbox"><label for="ten">Ten</label>
</div>
</form>

For your case :

  • replace each checkbox by one of your form
  • replace the jQuery trigger by "on submit" and then send the data using Ajax
  • in your php (where your send the Ajax data) calcul the % of question user has send
  • in your Ajax success part : change the progress bar width according to the % of data

Is it clear enought? Hope it help, but can't help you more since you provide no code !

</div>
dougu2240
dougu2240 谢谢让我试试
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

想做一个导出数据到excel的进度条,有哪位大佬知道怎么弄吗?

做一个进度条,显示导出数据到excel的进度百分比,当数据导出完成时,进度条显示100%。

怎么用进度条控件计算窗口正在显示的百分比?

怎么用进度条控件计算窗口正在显示的百分比?怎么在窗体完全显示成功后隐藏进度条控件?

请问Qt该怎样才能做出在Tab栏显示进度条的效果?

请问Qt该怎样才能做出在Tab栏显示进度条的效果(类似某些浏览器那样)?

在android不显示进度条对话框的问题

进度条对话框在Android程序中显示不出来,我找不出问题的原因。使用了如下代码来显示进度条对话框: func{ progressdialog.show(); .... ..... anotherfunction(); listview.setAdapter(); progressdialog.dismiss(); } 当.show() 命令执行以后,进度条对话框就会显示。但是当otherfucntion()方法被调用后,之前显示的进度条对话框会终止吗?编写对话框的一般规则是什么啊? 请求大家的帮忙,谢谢!

processbar进度条控件,怎么在进度中增加一个百分比的显示?

processbar进度条控件,怎么在进度中增加一个百分比的显示?如果用了label,会遮挡进度条的色块,不美观怎么解决?

进度条显示加载百分比在ajax,php

<div class="post-text" itemprop="text"> <p>Hi i am using ajax for loading database content .I want to display the total percentage of loading or image.</p> <p>This is my Script</p> <pre><code>function name1(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","user.php?q="+str,true); xmlhttp.send(); } </code></pre> <p>user.php?q=ram , which is passing a value .And fetch the data from database How to modify ajax to to display the loading image </p> </div>

C# Winform 用进度条显示一个命令行命令的进度

如题,我想用7z.exe来解压ISO镜像文件,因为时间可能会比较长,所以需要一个进度条来显示一下,7z.exe在执行的时候会有一个不断刷新的百分比,(如图)。 所以有兄弟知道怎么做这个命令行么?那个不断刷新的百分比应该有点用吧... ![图片说明](https://img-ask.csdn.net/upload/201507/07/1436239755_160602.png)

进度条怎么实现,显示在一行,动态更新的

![图片说明](https://img-ask.csdn.net/upload/201609/29/1475162866_318200.png) 如上图怎么实现这种进度条,谢谢

vb.net 进度条 ,垂直的方式显示,并可以显示出百分比

如题 1、我在网上找到一个demo,但是没有源代码 ![图片说明](https://img-ask.csdn.net/upload/201905/05/1557024202_393382.jpg) 我想把效果变成如下 ![图片说明](https://img-ask.csdn.net/upload/201905/05/1557024264_395011.jpg) 2、在中间加上百分率的进度 感谢!

在已有的进度条下面怎么添加会动的小数点的百分率显示

public class MainActivity extends AppCompatActivity { private ProgressBar progressBar; private Timer timer; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final Button button1 = (Button) findViewById(R.id.button_1); final Button button2 = (Button) findViewById(R.id.button_2); progressBar = (ProgressBar) findViewById(R.id.progress_bar); button1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String s1 = button1.getText().toString(); if (s1.equals("start")) { button1.setText("stop"); } if (s1.equals("stop")) { button1.setText("start"); } } }); button2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int progress = progressBar.getProgress(); progress = 0; progressBar.setProgress(progress); } }); timer = new Timer(); final Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { if (msg.what == 0) { if (button1.getText().equals("stop")) { int progress = progressBar.getProgress(); progress = progress + 1; progressBar.setProgress(progress); } } } }; timer.schedule(new TimerTask() { @Override public void run() { // (1) 使用handler发送消息 Message message=new Message(); message.what=0; mHandler.sendMessage(message); } },0,100); } }

C#进度条能否根据代码的执行进度来加载进度?

我在网上搜索了下资料,大部分都是使用Timer控件或者线程来进行,但是最终都是根据计算结果来写出一个MaxValue和一个Value来计算并且填充进度条 但是计算的话总感觉不是很准确,我如今遇到了一个比较棘手的难关(对于我而言),有个界面的树在读取数据库进行绑定的时候会显得非常慢,但是设定进度条的时间长短根本无法确定,以及代码例如(链接TCP之类的)断开链接也会产生卡主的状况,但是由于线程的关系,进度条依然显示完毕了。 使得我非常的头疼,因此我想问问,有没有办法获取代码的执行进度,根据代码的总执行次数和现在执行的行数来填充进度条? 或者看到这个问题的您能给我一种更加好的方案呢?希望能被解答下。

如何使用php从服务器下载文件时显示进度条

<div class="post-text" itemprop="text"> <pre><code>&lt;?php $zip_file="test.zip"; $source="abc.com/$zip_file"; $data=file_get_contents("$source"); sleep(1); //display the progress $dest=file_put_contents($zip_file,$data); ?&gt; &lt;div id='status'&gt;progress ...&lt;/div&gt; </code></pre> <p>I want to show the progress bar for every 1 second of downloaded % and remaining % to download.</p> </div>

各位大神 dojo 的 百分比数据如何显示 ProgressBarColorLayer

我的dojo网格中数据,有百分比进度条型的数据,现在 想达到以下效果该如何设置啊 ![图片说明](https://img-ask.csdn.net/upload/201710/20/1508469823_77244.png) 而现在只能显示到数值 ![图片说明](https://img-ask.csdn.net/upload/201710/20/1508470000_595959.png)

怎么样在进度条中显示processbar的value值

怎么样在进度条中显示processbar的value值?怎么制作中间带有数字百分比的进度条控件?

uploadfive网页上传图片在一些安卓机上有进度条但是不显示进度百分比

uploadfive网页上传图片,在一些安卓机上有进度条但是不显示进度百分比

C#的网页中显示ffmpeg转换视频的进度条

公司的网站中使用了red视频服务器,后台调用ffmpeg做视频转换,现在想在转换的网页中加一个进度条,搜了很多资料都是winform的进度条。请问有人遇到过这个问题么? 该怎么做。我现在已经在后台代码中取到转换的百分比了,怎么在网页中时时展示呢? 求高人指点。

java后台+多进度条监控+异步+html5批量上传图片+jquery

小弟现在要做一个项目,情况是这样的,基于html5批量选择文件;java后台监控进程;jQuery发回调函数;一个文件配对一个进度条,点击上传后所有文件同时上传,不等待,并同时、分别显示进度百分比;就是异步同时上传,同时监控。现在的问题是java后台的servlet中的方法的变量如何循环如何写。jQuery的回调函数怎么写?请高人指点。(除了jQuery库之外不加任何插件)

怎么写进度条,求问大神

我需要一个有百分比的感觉的进度条,不要下载的那种![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/5.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/5.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/5.gif)急需![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/2.gif)大神们,新手上线,多多指教

前后台同步的进度条问题

如何获得前后台同步的进度条,后台处理多条数据,前台要显示处理完的百分比,怎么做

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问
相关内容推荐