无法理解为什么 "jQuery File Upload " 插件无法正常工作

Question

在过去的一个小时里，我正在努力让 jQuery plugin 工作。

我无法解决的是这个 js 错误 Uncaught TypeError: $(...).fileupload is not a function, 我尝试了很多东西..我什至从演示站点下载了 js 文件，但仍然出现此错误，

我该如何解决？这是我的 js 文件（如您所见，只有在加载 dom 时才会调用插件：

$(document).ready(function () {
    $('#fileUpload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

这是我的 .cshtml（我正在使用 asp.net mvc）代码文件：

<h2>Index</h2>

<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload.css" rel="stylesheet" />
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-ui.css" rel="stylesheet" />
<!-- CSS adjustments for browsers with JavaScript disabled -->
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-noscript.css" rel="stylesheet" />
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-ui-noscript.css" rel="stylesheet" />


<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="~/Assets/plugins/jqueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-ui.js"></script>

<script src="~/Assets/scripts/js.js"></script>

Answer 1

改变后

$(document).ready(function ( ... ) {

到

$(document).load(function ( ... ) {

错误消失了。

Answer 2

请检查 Firebug 中的控制台检查元素某些错误未显示在控制台中。

我认为您的网页上没有加载某些文件或在网页中找不到文件路径，所以会出现此错误。

Answer 3

对我来说，问题在于重复调用 jquery.min.js 脚本

无法理解为什么 "jQuery File Upload " 插件无法正常工作

Can't figure why "jQuery File Upload " plugin isn't working

jquery

jquery-file-upload