3

我正在尝试使用jQuery file upload，但我遇到了 RequireJS 配置。我们将依赖项安装在 /ext/ 文件夹中，例如：

/src
  /ext
    /jquery-file-upload

在我的 main.js 中，我使用以下配置：

require.config({
    paths: {
        "ext/jquery-file-upload": "../ext/jquery-file-upload/js/jquery.fileupload"
    }
});
require([
    "ext/jquery-file-upload"
]);

但是随后 RequireJS 尝试从根目录加载 jquery.ui.widget.js而不是作为相对文件。它位于 jquery-file-upload 目录中。

有谁知道我做错了什么，或者有谁知道用于 jQuery 文件上传的有效 RequireJS 配置？

谢谢，

马汀

4

4 回答 4

4

If you look at the jquery.fileupload.js file, at the top it declares its own dependencies 

if (typeof define === 'function' && define.amd) {
    // Register as an anonymous AMD module:
    define([
        'jquery',
        'jquery.ui.widget'
    ], factory);

You need to edit your require.config path for the jquery.ui.widget item. 

require.config({
    paths: {
        'jquery.ui.widget': 'your_path_here/jquery.ui.widget'
    }
});
于 2013-08-23T16:19:37.643 回答
1

如果我没记错的话，你的问题是你的插件 - jquery-file-upload - 试图自己加载它的依赖项。

问题是 JS 中的文件路径是相对于加载脚本文件的页面，而不是文件本身（外部文件中的 Javascript 中的相对路径）。这解释了为什么您的文件似乎是相对于根而不是给定路径加载的。

在这种情况下，您可能需要操作一些插件代码并查看此处给出的有关 requireJS 和依赖项加载的解释： 如何同时使用 requireJS 和 jQuery？.

于 2013-08-13T08:53:14.973 回答
1

尝试将 jquery.widget.ui 映射到正确的路径...

require.config({
    paths: {
        "ext/jquery-file-upload": "../ext/jquery-file-upload/js/jquery.fileupload"
        "jquery.ui.widget": "../ext/jquery-file-upload/js/vendor/jquery.ui.widget"
    }
});
require([
    "ext/jquery-file-upload"
]);
于 2013-08-21T23:08:53.050 回答
0

对于遇到此问题的其他人...这是对我们有用的配置。希望它可以帮助某人

路径声明

 paths: { 

        'jquery.ui.widget': '../../Scripts/FileUpload/jqueryui/jquery.ui.widget',
        'jquery_iframe_transport': '../../Scripts/FileUpload/jquery.iframe-transport',
        'jquery.fileupload': '../../Scripts/FileUpload/jquery.fileupload'

    }

定义语句

define(['jquery.ui.widget','jquery_iframe_transport','jquery.fileupload'])

以上取决于正在加载的jquery。我们正在使用 Durandal，因此不需要 shim，但您需要确保先加载 jquery

代码中的初始化

function uploadFile() {


        var url = '/Backload/UploadHandler';

        $('#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 .bar').css(
                    'width',
                    progress + '%'
                );
            }
        });
    }

这是基本的上传示例..

于 2013-10-14T09:16:31.653 回答