我的简单页面JSP中有我的html / js代码:
<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>
这很简单......所有JS资源都可以。 但是在控制台中我看到了这个错误:
TypeError:$(...)。fileupload不是函数 $( '#文件上传')。文件上传({
你对我的问题有任何建议吗?
答案 0 :(得分:5)
我遇到了同样的问题,我在关闭body
标签之前移动了js文件并且它有效:
<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>
答案 1 :(得分:1)
我通过访问BlueImp在线演示站点为自己解决了此问题。可以在https://github.com/blueimp/jQuery-File-Upload找到该项目的GitHub存储库。如果查看它们的源代码,很明显,您需要两个文件来帮助您的项目进行此工作。 1. jquery.ui.widget.js和2. jquery.fileupload.js。
如果您在应用程序中包含这些文件,则文件上传的代码将起作用。您将需要UI小部件文档作为fileupload文件的依赖项。
如果您正在寻找一个可行的示例,Heroku的文章不错,无论您是否使用Heroku,它都能帮助您进行指导。 Direct to S3 Image Uploads in Rails
编码愉快!