进度回调始终在 jquery-file-upload 插件中显示 100% 上传

Question

I want to implement a progress bar for the blueimp jquery-file-upload plugin but the progress callback is only fired once immediately after the upload begins and data.loaded == data.total.

<input data-url="/ads/32/photos" id="image" name="image" type="file" />

$(".upload-btn input").fileupload({
    dataType: "json",
    progress: function (e, data) {
        alert(data.loaded + "/" + data.total);
    },
    done: function (e, data) {
        alert("done");
    }
});

Seconds later (when the upload completes) the done callback is fired and I can confirm via server logs that the upload was successful. I get the same behavior when I try to use the progressall callback as well.

Not sure if it's related, but I'm not currently including the jquery.fileupload-fp.js library since adding that prevents any upload activity from happening what so ever.

Any idea what I'm doing wrong?

Answer 1

Is the progress function alert ing the string "100%"? I'm unfamiliar with the plugin, but the expression in alert for the progress function casts everything to a String type. So I would expect that it shows the string "x/y".

In any case you should change the progress function to

alert( data.loaded / data.total ); // no quotes, no +'s

If those attributes ( total and loaded ) are correct, then it should give you the behavior you want.

Edit: To clarify what's happening, if this answered your question: the + operator behaves in different ways according to the data type of its operands. If you + two numbers together, it works as an arithmetical addition operator. If even one of the operators is a string, the + will first change the other operands to strings first, and then concatenate them. The end result will be a string, not a number.

var two = "2"; // two is a String data type
alert(two + 2); // Returns "22" as a String

var two = 2;
alert(two + 2); // Returns 4

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition