Question

过去一小时，我试图让jQuery plugin开始工作。

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

我该如何解决？这是我的js文件（你可以看到只有在加载dom时才会调用pluging：

$(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 Inspect元素中的控制台，控制台中未显示某些错误。

我认为您的网页上未加载某些文件或网页中找不到文件路径，因此发生此错误的原因。

Answer 3

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

无法理解为什么＆＃34; jQuery文件上传＆＃34;插件不起作用

3 个答案: