jQuery-File-Upload - TypeError: $(...).fileupload is not a function
I have my html/js code in my simple page JSP:
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
<body>
<form id="MyID" method="post" action="JSFPAGE" enctype="multipart/form-data">
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<input id="fileupload" type="file" name="files[]" multiple>
</span><br><br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success">
</div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files">
</div>
<script type="text/javascript">
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'xUpload.xsp';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</form>
</body>
this is very simple...and all the JS resource are OK. But in the console I see this error:
TypeError: $(...).fileupload is not a function $('#fileupload').fileupload({
Have you any suggest for my problem?
Answer
I had the same problem, I just moved the js files before closing the body tag and it worked:
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<body>
<form id="MyID" method="post" action="JSFPAGE" enctype="multipart/form-data">
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<input id="fileupload" type="file" name="files[]" multiple>
</span><br><br>
...
<script type="text/javascript">
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'xUpload.xsp';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
...
});
</script>
</form>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
</body>