javascript - 有没有办法显示从客户端发送到服务器的base64图像字符串数据的传输进度?

标签 javascript html upload

我的应用涉及繁重的客户端图像处理。由于文件在用户 session 期间修改得如此频繁,在用户完成并选择保存图像之前,我们不会将它们实际上传到服务器。

图像是使用 html5 文件 API 从客户端读取的,并作为 base64 字符串存储在内存中,用户可以在其中快速高效地执行他/她的操作。

当用户选择保存时,我们通过标准的 ajax POST 将一个或多个字符串传输到服务器,然后将图像构建到服务器端的物理文件中。

我想做的是为最后的上传阶段提供一个进度条。

现在,我很清楚 html5 规范包括对文件上传进度报告的支持。然而,我们没有使用标准的上传方法,相反,如上所述,图像以字符串形式发送。

所以我的问题归结为以下几点:

A) 是否可以实际测量在一个简单的帖子(PHP 服务器端)期间发送的实际字节数。如果是这样的话,这会起作用,因为我已经从 HTML5 filereader api 中获得了以字节为单位的图像大小。

B) 如果没有,我可以即时将 base64 数据转换为实际文件,并通过标准的 html5 上传方法发送它们,并在进行过程中报告进度。

在任何一种情况下......如果是这样,怎么做?

非常感谢。

最佳答案

当您通过 ajax 发送 Base64 图像时,它会更容易。 Ajax 使用回调函数,因此只需使用某种指示器让用户知道 ajax 已启动(即文件下载已开始)。完成后回调函数将运行,现在您可以关闭指示器,无论它是什么。

至于通过 ajax 测量实际字节数,我不确定。

这个方法

showing progressbar progress with ajax request

建议估计一下。我会更进一步,也许会计算回调需要多长时间,比如 10 次尝试(使用这个平均值来估计你的进度条,并使用上面提到的 90% 技巧)。

或者,如果您想对 Base64 文本进行编码/解码。

How can you encode a string to Base64 in JavaScript?

关于javascript - 有没有办法显示从客户端发送到服务器的base64图像字符串数据的传输进度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13920574/

相关文章:

javascript - Highcharts - Highstock "inputEditDataFormat"中断输入

javascript - 混淆使用 v-bind :class ternary on a v-for element when referencing the properties of the v-for element

html - 布局/HTML 中的 MVC 4 错误

html - 用于弹出图片和悬停的CSS

php - 设置上传文件夹 777 权限安全吗?

php - Wordpress:在管理选项页面上传图片

javascript - jQuery 和 "this"管理?如何避免变量冲突?

javascript - 需要连接单个数组内的多个数组并将每个数组的第一个值设置为键

html - TED 视频嵌入中的 "Start time"

jquery - 在 Firefox 中通过 SSL 使用 jQuery 和 jquery.fileupload.js 上传文件失败