使用RequireJS加载blue-imp jquery文件上传 [英] load blue-imp jquery fileupload with RequireJS

问题描述

我正在尝试通过 blue-imp 加载jquery文件上传 使用RequireJS.

I'm trying to load the jquery fileupload by blue-imp with RequireJS.

加载时遇到了一些问题.我尝试了 this 和

I'm facing some problem while loading it. I tried the solutions like this and this but none worked with my situation.

我在main.js中所做的是

require.config({
    baseUrl : 'js',
    paths: {
        jquery: 'lib/jquery/jquery-1.11.0',
        jqueryfileupload : 'lib/jquery/jquery.fileupload',
        underscore: 'lib/backbone/underscore/underscore-min',
        backbone: 'lib/backbone/backbone-min',
    },
    shim : {        
    'underscore' : {
        exports : "_"
    },
    'backbone' : {
        deps : [ "underscore", "jquery" ],
        exports : "Backbone"
    },
    'jqueryFileUpload' : {
        deps : ["jquery"]           
    }
});

我认为它是

define(['backbone', 'jqueryFileUpload' ],
        function(Backbone, fileupload ) {

});

在控制台上给我错误

"NetworkError: 404 Not Found - http://localhost/AppUI/js/jqueryFileUpload.js?cmmn=1409151733588"

为什么要从正确的路径中选择主干，为什么要直接从baseURL中选择jqueryFileUpload?

Why it's picking backbone from its correct path and why jqueryFileUpload from baseURL directly?

我能够执行val()，append()之类的普通jquery操作，但是此操作具有依赖性，因此我提供了它.

I'm able to perform normal jquery operations like val(), append() but this one has dependency so i provided it.

我进行了更多研究，并发现了fileupload.js的嵌套依赖关系，即jquery ui和小部件.我也将它们导入了我的

I researched a bit more and found out the nested dependencies for fileupload.js which are jquery ui and widget. I also imported them in my

        paths : {
            jquery: 'lib/jquery/jquery-1.11.0',
            jqueryUI : 'lib/jquery/jquery-ui-1.10.4.custom.min',
            jqueryfileupload : 'lib/jquery/jquery.fileupload'
        },

       shim : {
           'jqueryUI' : ['jqueryUI'],
           'jqueryFileUpload' : {
                  deps : ["jquery", "jqueryUI", "jqueryIframetransport"],
                  exports : "jQueryFileUpload"
        }
}

即使在此之后，我仍然遇到相同的错误.它选择了错误的路径.

Even after this i'm getting the same error. It's picking up the wrong path.

有什么建议或方法可以继续吗?

Any suggestions or approaches to proceed ahead?

推荐答案

基于此原因，您不能将shim config与jquery fileupload一起使用(

You can not use shim config with jquery fileupload for that reason (shim config):

//Remember: only use shim config for non-AMD scripts,
//scripts that do not already call define(). The shim
//config will not work correctly if used on AMD scripts,
//in particular, the exports and init config will not
//be triggered, and the deps config will be confusing
//for those cases.

jQuery文件上载的源文件已使用define(AMD)脚本！ (看看jquery.fileupload.js) 即便如此，您也可以通过以下方式配置requirejs依赖项:

Jquery file upload source files already use define (AMD) scripts! (look at jquery.fileupload.js) Even so you can configure the requirejs dependencies this way:

顶级项目目录(兼容下层):

top level project directory (bower compatible):

* app/
    - modules/
        - module.js
    - vendor/
        - jquery/
            - dist/
                - jquery.js
        - underscore/
            - underscore.js
        - jquery.fileupload-upload/
            - vendor/
                - jquery.ui.widget.js
            - js/
                - jquery.fileupload.js
                - jquery.fileupload.image.js.
                - ...

config.js:

config.js:

var require = {
    "baseUrl": "/app/",
    "shim": {
        jquery: {
            exports: "$"
        },
        underscore: {
            exports: "_"
        }
    },
    "paths": {
        "jquery": "vendor/jquery/dist/jquery.min",
        "jquery.ui.widget": "vendor/jquery-file-upload/js/vendor/jquery.ui.widget",
        "underscore": "vendor/underscore/underscore-min",
        "bootstrap": "vendor/bootstrap/dist/js/bootstrap.min",
        "tmpl": "vendor/blueimp-tmpl/js/tmpl",
        "load-image": "vendor/blueimp-load-image/js/load-image",
        "load-image-meta": "vendor/blueimp-load-image/js/load-image-meta",
        "load-image-exif": "vendor/blueimp-load-image/js/load-image-exif",
        "load-image-ios": "vendor/blueimp-load-image/js/load-image-ios",
        "canvas-to-blob": "vendor/blueimp-canvas-to-blob/js/canvas-to-blob",
        "jquery.iframe-transport": "vendor/jquery-file-upload/js/jquery.iframe-transport",
        "jquery.fileupload": "vendor/jquery-file-upload/js/jquery.fileupload",
        "jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process",
        "./jquery.fileupload-process": "vendor/jquery-file-upload/js/jquery.fileupload-process",
        "jquery.fileupload-image": "vendor/jquery-file-upload/js/jquery.fileupload-image",
        "jquery.fileupload-audio": "vendor/jquery-file-upload/js/jquery.fileupload-audio",
        "jquery.fileupload-video": "vendor/jquery-file-upload/js/jquery.fileupload-video",
        "jquery.fileupload-validate": "vendor/jquery-file-upload/js/jquery.fileupload-validate",
        "jquery.fileupload-ui": "vendor/jquery-file-upload/js/jquery.fileupload-ui",
    }
};

模块:

define(['jquery',
'tmpl',
'load-image',
'load-image-meta',
'load-image-exif',
'canvas-to-blob',
'jquery.iframe-transport',
'jquery.fileupload',
'jquery.fileupload-process',
'jquery.fileupload-image',
'jquery.fileupload-audio',
'jquery.fileupload-video',
'jquery.fileupload-validate',
'jquery.fileupload-ui'],

function ($, ...) {

这篇关于使用RequireJS加载blue-imp jquery文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！