Menu
Am using blueimp jQuery plugin for multiple fileupload for my web application in struts framework, but the problem is fileupload handler is not getting initialized by jQuery. I am getting $('#fileupload').fileupload not a function. Can any one help me to figure out where I am going wrong.
`<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/jquery.fileupload-ui.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.fileupload-ui-noscript.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.postmessage-transport.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.fileupload.js"></script>
</head>
<style type="text/css">
.bar {
height: 18px;
background: green;
}
</style>
<head>
<body>
<form id="fileupload" action="testAction.do?operation=uploadImages" method="POST" enctype="multipart/form-data">
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
<div class="row fileupload-buttonbar">
<div class="span7">
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<span class="fileupload-loading"></span>
</div>
<div class="span5 fileupload-progress fade">
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<div class="progress-extended"> </div>
</div>
</div>
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
<br>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<script>
jQuery(function () {
jQuery('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>`
749
asked Apr 15 '26 09:04
You have to make sure that you are loading all the script files in the correct order:
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
just before you close the body tag.
Also, use the browser inspector the see that the scripts are actually loading.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
