jQuery-File-Upload - TypeError: $(...).fileupload 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33943551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery-File-Upload - TypeError: $(...).fileupload is not a function
提问by Daniele Grillo
I have my html/js code in my simple page JSP:
我的简单页面 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>
this is very simple...and all the JS resource are OK. But in the console I see this error:
这很简单...所有JS资源都可以。但是在控制台中我看到了这个错误：
TypeError: $(...).fileupload is not a function $('#fileupload').fileupload({
类型错误：$(...).fileupload 不是函数 $('#fileupload').fileupload({
Have you any suggest for my problem?
你对我的问题有什么建议吗？
采纳答案by calicanadian
I fixed this for myself by going to the demo site BlueImp has online. The GitHub repo for this project can be found at https://github.com/blueimp/jQuery-File-Upload. If you look at their source code, it becomes apparent that you need two files to help this work on your project. 1. jquery.ui.widget.jsand 2. jquery.fileupload.js.
我通过访问 BlueImp 在线演示站点为自己解决了这个问题。该项目的 GitHub 存储库可以在https://github.com/blueimp/jQuery-File-Upload找到。如果您查看他们的源代码，很明显您需要两个文件来帮助您的项目工作。1. jquery.ui.widget.js和 2. jquery.fileupload.js。
If you include these files in your app, the code for the fileupload will work. You'll need the UI widget document as a dependency for the fileupload file.
如果您在应用程序中包含这些文件，则文件上传的代码将起作用。您将需要 UI 小部件文档作为文件上传文件的依赖项。
In case you are looking for a working example of this, Heroku has a decent write up that will help guide you regardless of if you are using Heroku or not. Direct to S3 Image Uploads in Rails
如果您正在寻找这方面的工作示例，Heroku 有一篇不错的文章，无论您是否使用 Heroku，它都会帮助指导您。在 Rails 中直接上传到 S3 图像
Happy coding!
快乐编码！
回答by rom
I had the same problem, I just moved the js files before closing the bodytag and it worked:
我遇到了同样的问题，我只是在关闭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>
