Javascript Backbone.js base64视频上传,带进度条
我有一个脚本,可以通过主干/ajax将base64视频发送到服务器:Javascript Backbone.js base64视频上传,带进度条,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我有一个脚本,可以通过主干/ajax将base64视频发送到服务器: video = new AccountVideo(); video.set({video: imageFile}); this.collection.create(video, { // wait for return status from server wait: true, success: function(model, response) {
video = new AccountVideo();
video.set({video: imageFile});
this.collection.create(video, {
// wait for return status from server
wait: true,
success: function(model, response) {
App.utils.notifyEnd('Video is queued for transcoding.');
accountVideoListView.render();
},
error: function(model, xhr) {
App.utils.notifyEnd(xhr.responseJSON.message, 'error');
}
});
我正在尝试创建一个上传进度条,与此类似,但完全在主干内
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.open("POST", "/api/accounts/videos");
ajax.send(imageFile);
function progressHandler(event){
var percent = (event.loaded / event.total) * 100;
console.log(percent);
} function completeHandler(event){
}
我试过:
var self = this;
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.onprogress = self.handleProgress;
return xhr;
}
handleProgress: function(evt){
var percentComplete = 0;
if (evt.lengthComputable) {
percentComplete = evt.loaded / evt.total;
}
console.log(Math.round(percentComplete * 100)+"%");
}
但在视频结束后,它只显示0%。我想我很接近,只需要一个指针。谢谢 好的,我四处看看,了解了更多关于xhr:函数的情况 这就是有效的方法
// add image model to collection
this.collection.create(video, {
// wait for return status from server
wait: true,
success: function(model, response) {
App.utils.notifyEnd('Video is queued for transcoding.');
accountVideoListView.render();
},
error: function(model, xhr) {
App.utils.notifyEnd(xhr.responseJSON.message, 'error');
},
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',showProgress, false);
} else {
console.log("Upload progress is not supported.");
}
return myXhr;
}
});
function showProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total) * 100;
console.log(percentComplete);
}
}