java 做进度条 ajax实现 js jquery ext 都可以需要具体实现过程和代码 需要读取数据

Posted 2023-04-18

java 做进度条 ajax实现 js jquery ext 都可以需要具体实现过程和代码 需要读取数据和数据库有交互 能控制时间实现和迅雷下载差不多的效果 已经完成百分之几 还剩下几小时几分钟 几秒钟 已完成:0% 剩余时间约为：-时-分-秒 这样的效果 主要是控制时间

这个好像做不到，现在一般有的效果就是上传文件时的进度条。
像你说得读取数据之类还没遇见过，一般也只是加个循环转动的图片等待而已，不能做到实时。追问

我做了一个 但是有的可以 有的不可以 循环简单的可以做到 但是循环复杂的就不行了 时间控制不好简单循环的是做后面的时间不行 控制不了

追答

这个你可以考虑下实际操作流程，就比如查询数据库，你难道可以通过你的代码实时得到数据库已经查询了多少数据，还需要多少时间才能返回结果？
然后数据库返回结果后你也无法计算后端需要多少时间把数据组合成要呈现给页面样子，最后还也页面组织好了后要传送给客户端也要花时间。这些实在要弄或许可以弄出来，但我觉的这个已经没意义了。
这个要求看到过的只在传文件时候有用，其他的本人暂时还没见过。

参考技术A 你可以 考虑DWR3.0 这个就是Ajax 的框架

AJAX大文件切割上传以及带进度条。

分块传输的原理就是利用HTML5新增的文件slice截取函数。

 

代码如下：

html：

<input id="f" type="file" name="part" onchange="writeFile()">

JS：

核心部分已经加粗显示了，其他部分不用看，因为实现的方式有很多种，不一定要按照我的方式去写，但是核心是不会变的。

var writeFile = function(){
　　var temp = null;
　　var formData = null;
　　var xhr = null;

　　var file = document.getElementById(‘f‘);
　　var f = file.files[0];
　　var totalSize = f.size;

　　// 每次截取的大小
　　var num = 1024*1024;

　　var start = 0;
　　var end = start + num;

　　// 发送到的地址
　　var url = ‘http://127.0.0.1/index.php‘;

　　// 进度条
　　var loaded = function(bili){
　　　　console.log(bili);
　　};

　　writeFile = function(){
　　　　// 如果已经截取完了跳出这个函数。
　　　　if(start>=totalSize)return;

　　　　// 截取文件
　　　　temp = f.slice(start,end);

　　　　formData = new FormData();
　　　　formData.append(file.name,temp);

　　　　xhr = new XMLHttpRequest();
　　　　xhr.open(‘POST‘,url);

　　　　xhr.onreadystatechange = function(){
　　　　　　if(this.readyState===4 && this.status===200){
　　　　　　　　// 改变下一次截取的位置
　　　　　　　　start = end;
　　　　　　　　end = start + num;
　　　　　　　　// 因为截取可能超过totalSize，判断最后一次截取是否大于totalSize如果大于就直接让end等于totalSize
　　　　　　　　if(end>totalSize){
　　　　　　　　　　end = totalSize;
　　　　　　　　}
　　　　　　　　// 可以用这个做进度条
　　　　　　　　loaded((start/totalSize)*100);
　　　　　　　　// 递归，如果文件没有截取完，继续截取
　　　　　　　　writeFile();
　　　　　　}
　　　　};
　　　　xhr.send(formData);
　　};

　　// 调用一下
　　writeFile();
};

当然除了这些还是不够的，后端也是需要处理一下的，因为现在发送过去的文件是一块一块的，所有需要合并一下，不过已经和前端没有关系了，但我还是给出代码吧。

<?php

// 判断是否有这个文件
if(!file_exists(‘./a/up.wmv‘)){

　　//创建一个文件
　　move_uploaded_file($_FILES[‘part‘][‘tmp_name‘],‘./a/up.wmv‘);
}else{

　　//将前面的那个文件和当前这个文件合并，FILE_APPEND把当前这个内容追加上去。
　　file_put_contents(‘./a/up.wmv‘,file_get_contents($_FILES[‘part‘][‘tmp_name‘]),FILE_APPEND);
　　echo ‘ok‘;
}

?>