无法让 blueimp/jQuery.fileupload 插件工作

Question

我尝试使用此jQuery插件进行跨域图像上传jQuery.fileupload

我认为插件使用 require.js，我已经包含它，因为我使用它为我的页面加载 JavaScript 代码。该插件似乎不需要我包含 require.js，但是当我测试我的页面时，我得到此错误

未捕获的错误：不匹配的匿名 define（） 模块：函数 （ $， 未定义 ） { http://requirejs.org/docs/errors.html#mismatch

有人可以指出我正确的方向吗

Answer 1

你不需要使用 Requirejs 来使用 jQuery File Upload。

只需确保以正确的顺序包含所需的文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        // your options
    });
});
</script>

Answer 2

我很高兴

我在这里并不孤单。这个问题花了我几个小时，这是给你的答案，

这完全是关于加载这些JavaScript文件的顺序。必须按以下顺序包含文件，否则它将不起作用。

• jquery-min.js
• jquery.ui.widget.js
• jquery.iframe-transport.js
• jquery.fileupload.js
• jquery.fileupload-ip.js
• jquery.fileupload-ui.js
• 要求最小值.js（这必须是最后一个要包含的）

Answer 3

这可能是

函数名称之间的冲突，请尝试jQuery.noConflict（）。 或 RequireJS Optimizer。

http://requirejs.org/docs/optimization.htmlhttp://api.jquery.com/jQuery.noConflict/

Answer 4

您很可能会收到此错误，因为您正在使用标准<script>标签加载包含 define（） 规则的 JavaScript 文件。

如果你想require工作，你需要使用require提供的依赖框架加载文件，也就是说，通过从代码的其他部分访问它：

define(
'jquery'
function($){
   // use $.fileupload here
})