jQuery-File-Upload - TypeError: $(...).fileupload is not a function答案

【问题标题】：jQuery-File-Upload - TypeError: $(...).fileupload is not a functionjQuery-File-Upload - TypeError: $(...).fileupload is not a function
【发布时间】：2015-11-26 16:45:14
【问题描述】：

我的简单页面 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资源都OK。但是在控制台中我看到了这个错误：

TypeError: $(...).fileupload 不是函数 $('#fileupload').fileupload({

你对我的问题有什么建议吗？

【问题讨论】：

你有什么解决办法吗？我有同样的问题

标签： jquery jquery-file-upload

【解决方案1】：

我遇到了同样的问题，我只是在关闭 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>

【讨论】：

我做了同样的事情但仍然不稳定:(

【解决方案2】：

我通过访问 BlueImp 的在线演示站点为自己解决了这个问题。这个项目的 GitHub 存储库可以在 https://github.com/blueimp/jQuery-File-Upload 找到。如果您查看他们的源代码，很明显您需要两个文件来帮助您完成项目。 1.jquery.ui.widget.js 和 2.jquery.fileupload.js。

如果您在应用中包含这些文件，则文件上传的代码将起作用。您需要 UI 小部件文档作为 fileupload 文件的依赖项。

如果您正在寻找这方面的工作示例，Heroku 有一篇不错的文章，无论您是否使用 Heroku，都可以帮助指导您。 Direct to S3 Image Uploads in Rails

编码愉快！

【讨论】：

对于任何对此仍有疑问的人 - 检查您是否正确下载了 .js 文件。我确实错误地下载了带有该文件的html页面。然后最好清除浏览器缓存并重新加载页面。