jQuery file upload cropper的流程

https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html

 

最开始初始化jquery.ui.widget.js中的factory( jQuery );

 

 

jquery.fileupload.js中

1. }(function ($) {

2. factory(window.jQuery);

3.$.widget('blueimp.fileupload', {

// The fileupload widget listens for change events on file input fields defined
// via fileInput setting and paste or drop events of the given dropZone.
// In addition to the default jQuery Widget methods, the fileupload widget
// exposes the "add" and "send" methods, to add or directly send files using
// the fileupload API.
// By default, files added via file input selection, paste, drag & drop or
// "add" method are uploaded immediately, but it is possible to override
// the "add" callback option to queue file uploads.

初始化file upload
$.widget('blueimp.fileupload', {

 

然后是jquery.ui.widget.js

4. $.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype,
// proxiedPrototype allows the provided prototype to remain unmodified
// so that it can be used as a mixin for multiple widgets (#8876)
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];

base._childConstructors.push( constructor );

5.$.widget.bridge( name, constructor );  //这里的name是file upload，constructor对应到79行

6.回到上面的 }(function ($) {

 

初始化jquery.fileupload-process.js中，也是

factory(
window.jQuery
);

var originalAdd = $.blueimp.fileupload.prototype.options.add;

// The File Upload Processing plugin extends the fileupload widget
// with file processing functionality:
$.widget('blueimp.fileupload', $.blueimp.fileupload, {

 

 

在constructor = $[ namespace ][ name ] = function( options, element ) {设置断点

初始化顺序

jquery.fileupload.js

jquery.fileupload-process.js

jquery.fileupload-image.js

jquery.fileupload-image-editor.js

jquery.fileupload-ui.js

然后再是main.js开始触发

 

 

https://github.com/tkvw/jQuery-File-Upload/blob/master/js/main.js

程序的入口在main.js中，

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: 'http://localhost:81/jquery-file-upload-server/php/'
});

然后，jquery.ui.widget.js 第79行

$[ namespace ] = $[ namespace ] || {};
existingConstructor = $[ namespace ][ name ];
constructor = $[ namespace ][ name ] = function( options, element ) {
// allow instantiation without "new" keyword
if ( !this._createWidget ) {
return new constructor( options, element );
}

 

$.widget.bridge = function( name, object ) {
var fullName = object.prototype.widgetFullName || name;
$.fn[ name ] = function( options ) {

 

 

然后是jquery.fileupload-ui.js里面的_create方法

jquery.fileupload-process.js里面的_create方法

jquery.fileupload.js里面的_create方法

jquery.fileupload-ui.js里面的_initEventHandlers方法中的this._super();，触发下面的

jquery.fileupload-image-editor.js里面的_initEventHandlers方法

继续执行jquery.fileupload-ui.js中的_initButtonBarEventHandlers方法，此方法在上面的_initEventHandlers里面

this._on(fileUploadButtonBar.find('.start'), {
    click: function (e) {
        e.preventDefault();
        filesList.find('.start').click();
    }
});
this._on(fileUploadButtonBar.find('.cancel'), {
    click: function (e) {
        e.preventDefault();
        filesList.find('.cancel').click();
    }
});
this._on(fileUploadButtonBar.find('.delete'), {
    click: function (e) {
        e.preventDefault();
        filesList.find('.toggle:checked')
            .closest('.template-download')
            .find('.delete').click();
        fileUploadButtonBar.find('.toggle')
            .prop('checked', false);
    }
});
this._on(fileUploadButtonBar.find('.toggle'), {
    change: function (e) {
        filesList.find('.toggle').prop(
            'checked',
            $(e.currentTarget).is(':checked')
        );
    }
});

jquery.fileupload-process.js的_create方法，

_create: function () {
this._super();
this._processing = 0;
this._processingQueue = $.Deferred().resolveWith(this)
.promise();
}

jquery.fileupload-ui.js

_create: function () {
this._super();
this._resetFinishedDeferreds();
if (!$.support.fileInput) {
this._disableFileInputButton();
}
},

 

_resetFinishedDeferreds: function () {
this._finishedUploads = [];
},

 

发现这些create方法，都是jquery.ui.widget.js中_createWidget方法后面的代码触发

_createWidget: function( options, element ) {

this._create();
this._trigger( "create", null, this._getCreateEventData() );

this._init();

 

然后是main.js中最后一部分

  $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });