Clever Geek Handbook

Jquery file upload plugin: how to use callbacks?

I am trying to implement a plugin to download a blue imp jquery file from: https://github.com/blueimp/jQuery-File-Upload/ as it is often stated the documentation is very detailed, but not very clear to me as a jquery newbie ...

I think I basically have almost zero experience with jquery, so if anyone can help me or give it to me I would be very happy!

I tried to set up the basic implementation as it is on the wiki and saved the following command as index.html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>

<body>

<input id="fileupload" type="file" name="files[]" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'server/php/',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

</script>

</body> 
</html>

What I wanted to do was show images that were loaded on the same page. I thought I needed to do this in a callback when the download is complete. However, I have no idea where to put the code ...

So, to find out where to put some code, I just tried to get an alert and added this code | UPDATE: this now works:

$('#fileupload').bind('fileuploaddone', function (e, data) {alert("Message","Titel")});

I also tried using just (UPDATE: still doesn't work):

$('#fileupload').fileupload('disable');

as the wiki says, but no effect.

Am I using the code in the wrong place? The code itself should be ok I think ...

Thanks in advance for any hint!

+3


source to share


2 answers


You can use a callback function fileuploadprogressall

and compare inside the loaded and shared data:



$('#fileupload').fileupload({
  ...
}).bind('fileuploadprogressall', function (e, data) {
        if(data.loaded==data.total) {
             console.log("All photos have been done");
        }
});
+2


source


If you bind to "fileuploadcompleted" you can trigger actions when images are loaded.

This can be done by tying the anchor to the end of your file. eg:

$('#fileupload').fileupload({
    dataType: 'json',
    url: 'server/php/',
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
}).bind('fileuploadcompleted', function (e, data) {alert("Message","Title")});


Or somewhere below the call to the file upload function using:

$('#fileupload').bind('fileuploadcompleted', function (e, data) {alert("Message","Title")});
+1


source






More articles:


All Articles