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!
source to share
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")});
source to share