blueimp fileupload - doesn't trigger the progress
Question
I have a very simple upload script, but it doesn't trigger the progress.. It only triggers the progress method once and when the file is done it triggers complete and prints done!
Chrome 58.0.3029.110 (64-bit)
Firefox 53.0.3 (32-bit)
Have also tried to upload larger files and still the progress method is only triggered once
https://github.com/blueimp/jQuery-File-Upload
test
code
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="/upload/js/blueimp/jquery.fileupload.min.js"></script>
<form id="upload_form" enctype="multipart/form-data" method="post" action="/upload/">
<input id="upload_input" type="file" name="files[]">
<input type="hidden" name="send" value="1">
</form>
<div id="upload_console"></div>
<script>
'use strict';
$(function(){
var div = $('#upload_console')
$('#upload_form').fileupload({
fileInput : $('#upload_input'),
progress : function(e, data){
//console.log(data.loaded);
//console.log(parseInt(data.loaded / data.total * 100, 10));
div.append('<div>'+data.loaded+'</div>')
},
complete : function(e, data){
//console.log('done');
div.append('<div>done!</div>')
}
});
});
</script>
</body>
</html>
2 answers
solution1
0 2017-06-20 10:44:43
It works for me in the same Firefox 53.0.3. Perhaps your issue is that you're uploading locally, so it's too fast to show any progress?
Even remotely, I only get three calls to progress for a 10MB file.
Try using a different connection, or limiting your upload speed.
solution2
0 2017-06-20 13:14:42
I think the reason why your test scenario is not working, is the default chunk size of 10 MB.
You can also try the "fileuploadprogress"-Event: https://github.com/blueimp/jQuery-File-Upload/wiki/Extended-progress-information
Otherwise you can use a chucked upload. But this only works in serval browsers. Here is the key to specify the "maxChunkSize". Then additional callbacks are triggered:
$('#fileupload').fileupload({maxChunkSize: 100000})
.on('fileuploadchunksend', function (e, data) {})
.on('fileuploadchunkdone', function (e, data) {})
.on('fileuploadchunkfail', function (e, data) {})
.on('fileuploadchunkalways', function (e, data) {});
Here you can try to reduce the maxChunkSize for example to 5000 (500 KB) - but just for your test scenario. In the production enviroment you should use a bigger chunk-size.
https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads
When the user is able to select multiple files for the upload and you want to inform him about the progress of each file-upload you can use the "fileuploadprocessalways"-event.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.