Unable to get blueimp/jQuery.fileupload plugin to work

问题

Am trying use this jQuery plugin for cross domain image uploads jQuery.fileupload

I think the plugin uses require.js, which i have already included because i use it load javascript code for my page. The plugin doesnt seem to required that i include require.js, but when i test my page i get this error

Uncaught Error: Mismatched anonymous define() module: function ( $, undefined ) { http://requirejs.org/docs/errors.html#mismatch

Can someone please point me in the right direction

回答1:

You don't need to use Requirejs to use jQuery File Upload.

Simply make sure you include the required files in the right order:

<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>

回答2:

I am glad that I am not alone here. This issue took me hours and here is the answer for you,

This is all about the order of loading those JavaScript files. You must include the files in the following order or it won't work.

jquery-min.js
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
jquery.fileupload-ip.js
jquery.fileupload-ui.js
require-min.js (this must be the last one to be included)

回答3:

this can be a be conflict between functions names, try jQuery.noConflict(). or RequireJS Optimizer.

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

回答4:

You're most likely getting this error because you're loading your JavaScript file containing your define() rule using standard <script> tag.

If you want require to work you need to load the file using dependency framework provided by require, that is, by accesing it from other part of the code by:

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

来源：https://stackoverflow.com/questions/10079670/unable-to-get-blueimp-jquery-fileupload-plugin-to-work

标签

jquery

file-upload

cross-domain