改善用户体念:jsp+Ajax实现实时上传,删除,导入Excel进度条

我们为了改善用户界面，通常会在处理量大或者是网络速度较慢的时候，给用户显示一个处理进度，让用户心理有底，增强用户等待结果的耐心，以改善用户体验。为了达到这个效果，通常做法有两大类：简单等待和真实的处理进度，我们着重讨论第二种方法的实现。

1)简单的等待界面：这种做法之所以说简单，就是在用法发送了处理命令后，立即在页面的某个地方替换一个waiting的图片，比如一个转圈的GIF，一张Loading的图片等，这种不称之为进度条，顶多就是个等待条，但通常还是可以给用户带来那么点满足，在业务量不大的情况下，也够用了。

2)真实的等待进度：比如说，我要在B/S系统中实现一个数据导入的功能，数据文件总共有100个，每个文件包含成千上万的数据，导入过程可能需要15分钟，那么我还用一个图片在那边打转吗？现在这样还是不够的，我可能需要让使用者知道，我当前处理的是第几个文件，还剩下几个，处理的百分比，并显示一个加载的真实进度条，这个进度条要如实反映处理的百分比。

实现1：由于用户处理的数据量大，可以在文件导入过程中，循环计算进度，并将进度信息存储在上下文中，并在前台页面定时从上下文读取进度数据，并在页面显示。这种方法思路比较直接。

实现2：使用观察者模式，实现进度主动通知。思路是：在文件导入过程中，计算进度信息，并将进度数据通知给观察者，前台页面定时向观察者咨询进度，并将进度显示到页面中。

2017-05-04再次改进。在上传过程中用户可以按 Esc 来取消上传(取消当前上传，或者是全部上传)...

转载于:https://www.cnblogs.com/interdrp/archive/2010/11/21/1883391.html

改善用户体念:jsp+Ajax实现实时上传,删除,导入Excel进度条相关推荐

JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条
// ajax + jQuery上传 function UploadFile() { var xhrOnProgress = function(fun) { xhrOnProgress.onprogr ...
Ajax上传文件并显示进度条
举例说明 (主要用到$.ajax的xhr参数执行回调) xhr 用于创建 XMLHttpRequest 对象的函数. 前端框架:jQuery+Bootstrap+Layer HTML页面里的表单: & ...
php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...
ajax上传.mp4文件不出错,ajax视频如何上传？
使用ajax如何上传视频呢?是否了解过呢?这个功能其实在各个网站中非常的常见,通用的技术是否了解呢?希望今天小编能给你们带来帮助哦,接下来就让我们一起来了解下吧. 功能:可实现拖拽上传视频,有进度条显 ...
vue实时上传文件进度条
vue实时上传文件进度条 //上传文件组件 <el-uploadaction:show-file-list="false":before-upload="uploa ...
java进度条_Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)...
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验从服务器上压缩下载: 从 ...
Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)...
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 从服务器上压缩下载: 从excel文件导入数据: 从数据库导出e ...
Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度
====================================================== 注:本文源代码点此下载 ================================= ...

改善用户体念:jsp+Ajax实现实时上传,删除,导入Excel进度条

改善用户体念:jsp+Ajax实现实时上传,删除,导入Excel进度条相关推荐

最新文章

热门文章