Question

我正在尝试使用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尝试从 root 加载jquery.ui.widget.js而不是相对文件。它位于jquery-file-upload目录..

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

谢谢，

马亭

Answer 1

如果查看jquery.fileupload.js文件，它会在顶部声明自己的依赖项

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

您需要编辑jquery.ui.widget项的require.config路径。

require.config({
    paths: {
        'jquery.ui.widget': 'your_path_here/jquery.ui.widget'
    }
});

Answer 2

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

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

在这种情况下，您可能需要操作一些插件代码并查看此处给出的有关requireJS和依赖项加载的解释： How do I use requireJS and jQuery together?。

Answer 3

尝试将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"
]);

Answer 4

对于其他任何有这个问题的人......这是适合我们的配置。希望它可以帮助某人

路径声明

 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，因此不需要垫片，但你需要确保在其他任何东西之前加载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 + '%'
                );
            }
        });
    }

这是基本的上传示例..

jQuery文件上传和RequireJS配置

4 个答案: