jQuery File Upload show time remaining?

问题

Hi I am using jQuery File Upload

It is working fine and I am showing the user a progress bar showing upload progress with code like the below:

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

On my page I have just included the jquery.fileupload.js file currently. Within the data of the progressall function I can see the bitrate, the total file size and the data loaded currently, which as I say updates my progress bar as expected. However reading this link on the site it suggests that I can get extra information including the time remaining? I have been unable to get this working however. There is a jquery.fileupload-ui.js file as well - I tried including that after my jquery.fileupload.js but I did not see time remaining propety getting added to the data in the progressall function. I also tried removing jquery.fileupload.js and just included jquery.fileupload-ui.js however that broke my file upload and it did not function.

Is there anyway I could easily calculate the time remaining using the bit rate/data loaded and total size or has anyone got a suggestion of the correct way I should be getting this extended information out of the box from the plugin?

回答1:

Given the example of Extended Progress Information, try ...

$('#fileupload').bind('fileuploadprogress', function (e, data) {
    // Log the current bitrate for this upload:
    // console.log(data.bitrate);
    console.log(data);
});

... to examine what data is being reported via this data point. Then, you can access what you need.

回答2:

I found the easiest solution was to calculate the time within the "fileuploadprogress" event:

var secondsRemaining = (data.total - data.loaded) * 8 / data.bitrate;

In my case I am only including jquery.fileupload.js and not jquery.fileupload-ui.js so I preferred this solution.

However, when you include the jquery.fileupload-ui.js component you get "extended progress" information available, but I believe this only applies to the "fileuploadprogressall" event and not "fileuploadprogress". https://github.com/blueimp/jQuery-File-Upload/wiki/Extended-progress-information

回答3:

Using the bitrate works technically, but it seems to be an instantaneous value, so your time remaining is going to need a lot of smoothing keep it from bouncing around like mad. Instead of building some complicated weighted average system, it's easier to just use the time spent and the current progress to estimate the time remaining.

First, stamp your start time on the data object in the add callback:

input.bind('fileuploadadd', function(e, data) {
  ...
  data.submitted = new Date().getTime();
  data.submit();
});

Then it's pretty easy to get a nice, smooth time remaining in the progress callback:

input.bind('fileuploadprogress', function(e, data) {
  var progress = data.loaded / data.total;
  var timeSpent = new Date().getTime() - data.submitted;
  var secondsRemaining = Math.round(((timeSpent / progress) - timeSpent) / 1000);
});

回答4:

This is what they do for their custom ui. You can use the data parameter in

$('#fileupload').bind('fileuploadprogress', function (e, data) {
    _renderExtendedProgress(data);
});

to call _renderExtendedProgress like this

_renderExtendedProgress: function (data) {
    return this._formatBitrate(data.bitrate) + ' | ' +
        this._formatTime(
            (data.total - data.loaded) * 8 / data.bitrate
        ) + ' | ' +
        this._formatPercentage(
            data.loaded / data.total
        ) + ' | ' +
        this._formatFileSize(data.loaded) + ' / ' +
        this._formatFileSize(data.total);
}

_formatFileSize: function (bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }
    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }
    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }
    return (bytes / 1000).toFixed(2) + ' KB';
}

_formatBitrate: function (bits) {
    if (typeof bits !== 'number') {
        return '';
    }
    if (bits >= 1000000000) {
        return (bits / 1000000000).toFixed(2) + ' Gbit/s';
    }
    if (bits >= 1000000) {
        return (bits / 1000000).toFixed(2) + ' Mbit/s';
    }
    if (bits >= 1000) {
        return (bits / 1000).toFixed(2) + ' kbit/s';
    }
    return bits.toFixed(2) + ' bit/s';
}

_formatTime: function (seconds) {
    var date = new Date(seconds * 1000),
        days = Math.floor(seconds / 86400);
    days = days ? days + 'd ' : '';
    return days +
        ('0' + date.getUTCHours()).slice(-2) + ':' +
        ('0' + date.getUTCMinutes()).slice(-2) + ':' +
        ('0' + date.getUTCSeconds()).slice(-2);
}

_formatPercentage: function (floatValue) {
    return (floatValue * 100).toFixed(2) + ' %';
}

You can refer to their soure code in https://github.com/blueimp/jQuery-File-Upload/blob/7d46990486ff08acfc001b6368b09bce6712c2c2/js/jquery.fileupload-ui.js

来源：https://stackoverflow.com/questions/27279682/jquery-file-upload-show-time-remaining

标签

javascript

jquery

file-upload

jquery-file-upload