- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有以下 AJAX 代码,脚本将文件正确上传到服务器(node express)。我面临的问题是 onProgress 仅在下载总字节时(因此在文件上传结束时)触发,而不是在其进度期间触发。
目前我无法在客户端显示一些用于文件上传进度的 UI。
我想知道这个问题是与 AJAX 调用有关还是与服务器有关。
var formData = new FormData();
var xhr = new XMLHttpRequest();
var onProgress = function (e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete);
}
};
var onLoad = function (event) {
var reponse = JSON.parse(xhr.responseText);
this._logicAddWdg(reponse);
}.bind(this);
var onError = function (err) {
console.log(onError);
};
formData.append('file', this._uploaderFile);
xhr.addEventListener('error', onError, false);
xhr.addEventListener('progress', onProgress, false);
xhr.addEventListener('load', onLoad, false);
xhr.open('post', '/uploads', true);
xhr.send(formData);
服务器 header 响应:
Accept-Ranges:bytes
Cache-Control:public, max-age=0
Connection:keep-alive
Content-Length:5510872
Content-Range:bytes 0-5510871/5510872
Content-Type:video/mp4
Date:Tue, 11 Apr 2017 12:02:20 GMT
ETag:W/"5416d8-15b5ce4a545"
Last-Modified:Tue, 11 Apr 2017 12:02:20 GMT
X-Powered-By:Express
Request Headers
view source
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8080
Pragma:no-cache
Range:bytes=0-
最佳答案
将您的上传事件处理程序附加到 XMLHttpRequest.upload
。
xhr.upload.addEventListener('progress', onProgress, false);
xhr.upload
处理上传数据的事件。你之前有什么处理响应下载的进度。
所有其他处理程序应保持不变。
关于javascript - 仅当文件上传完成时才会触发 XMLHttpRequest 事件 onProgress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43345271/
我已经实现了从 Internet 下载文件的代码,但在使用进度值(进度百分比)更新 GUI 线程时遇到空指针异常。 这是我的代码。 public class CustomviewActivity e
我正在尝试使用 ajax 实现带有上传百分比的标签。问题是xhr返回100%后,到readyState==4和status==200还需要17秒左右。 我正在使用 FormData() 对象发送图片
我正在使用 XmlHttpRequests 将图像上传到服务器,我想向用户显示这些上传的进度。 不幸的是,调用我的 onprogress-event 处理程序之间的间隔太大。通常,对于 500k 的图
进度条不更新。然而,它在任务完成时结束。 int totalSms = 12; int currentSms = 0; public class ProgressTask extends AsyncT
我正在使用 XmlHttpRequests 将图像上传到服务器,我想向用户显示这些上传的进度。 不幸的是,对我的 onprogress-event 处理程序的调用之间的间隔太大。对于 500k 的图像
我正在尝试使用 HTML5 制作一个带有进度表的文件 uploader 。这是我的代码: Test Progress Meter function submit
当发送带有 async = false 的 XMLHttpRequest 时,xhr.upload.onprogress 事件永远不会在文件上传时触发。 来源: var form = new Form
我有以下 AJAX 代码,脚本将文件正确上传到服务器(node express)。我面临的问题是 onProgress 仅在下载总字节时(因此在文件上传结束时)触发,而不是在其进度期间触发。 目前我无
Fine Uploader 的 onProgress() 回调在 Android 设备上不起作用。这是我的代码: onProgress: function(id, fileName, loaded,
我在获取在 chrome 上工作的音频标签的 onprogress 事件时遇到问题。它似乎适用于火狐。 http://www.scottandrew.com/pub/html5audioplayer/
您的浏览器如何决定触发 FileReader.onprogress 事件的频率?我在这个事件中做了一些处理,我认为它比我想要的更频繁地触发。我想要更大的 block 。有没有办法告诉它少开火? 示例代
我在通过 XHR 上传文件时订阅了 onProgress 事件。我的进度条是动画的(通过 jQuery)以提供更好的视觉美感。 onProgress 似乎触发得非常快,所以我想知道它实际触发的频率,以
除了永远不会触发 xhr.upload.onprogress 事件之外,以下代码中的所有内容都可以正常工作。 $(function(){ var xhr; $("#submit").c
我目前正在尝试构建一个 ajax 图像 uploader ,除了一个重要部分之外,我让它可以正常工作。 对于我上传的每个单独文件,我想更新该文件的进度条。目前它只更新最后一个文件的进度条。
如何确保在加载模型时定期更新加载进度,以便我可以构建加载图标。我已经跟踪了我能找到的每一个图例,但对于每个答案,onProgress 方法只会在加载完成后触发一次。 我的 typescript 加载器
我有一个 React 应用程序来播放来自后端的一些视频。为了播放视频,我集成了 npm 模块react-azure-mp 作为 Azure 媒体播放器的包装模块。根据 Azure 媒体播放器文档,有一
简短版: 我想得到 this与this一起工作: 长版: 我想创建一个 jQuery 扩展,它向 $.ajax 对象添加一个进度方法,并与 IE8 和 IE9 的 XDomainRequest 对象一
我正在尝试使用两个拇指搜索栏 我正在使用 This - PROJECT MainActivity.java public class MainActivity extends Activity {
您好,我在为场景加载纹理时生成加载消息时遇到了一些问题。 onProgress console.log 消息仅在纹理完全下载时触发,而不是在下载期间触发。 manager = new THREE.
问题 我有一个页面,用户可以在 FormData 和 XMLHttpRequest 的帮助下上传文件。上传文件工作正常。但是 upload.onprogress 仅在从 HTTP 连接上传时起作用。
我是一名优秀的程序员,十分优秀!