jQuery file upload上传图片的流程

先触发_onChange【jquery.fileupload.js】

_onChange: function (e) {
var that = this,
data = {
fileInput: $(e.target),
form: $(e.target.form)
};
this._getFileInputFiles(data.fileInput).always(function (files) {
data.files = files;
if (that.options.replaceFileInput) {
that._replaceFileInput(data);
}
if (that._trigger(
'change',
$.Event('change', {delegatedEvent: e}),
data
) !== false) {
that._onAdd(e, data);
}
});
},

然后触发_onAdd 【jquery.fileupload.js】

$.each(fileSet || files, function (index, element) {
var newData = $.extend({}, data);
newData.files = fileSet ? element : [element];
newData.paramName = paramNameSet[index];
that._initResponseObject(newData);
that._initProgressObject(newData);
that._addConvenienceMethods(e, newData);
result = that._trigger(
'add',
$.Event('add', {delegatedEvent: e}),
newData
);
return result;
});

然后trigger add 【jquery.fileupload-process.js】

add: function (e, data) {
var $this = $(this);
data.process(function () {
return $this.fileupload('process', data);
});
originalAdd.call(this, e, data);
}

然后是data.process【jquery.fileupload.js】

// Adds convenience methods to the data callback argument:
_addConvenienceMethods: function (e, data) {
var that = this,
getPromise = function (args) {
return $.Deferred().resolveWith(that, args).promise();
};
data.process = function (resolveFunc, rejectFunc) {
if (resolveFunc || rejectFunc) {
data._processQueue = this._processQueue =
(this._processQueue || getPromise([this])).then(
function () {
if (data.errorThrown) {
return $.Deferred()
.rejectWith(that, [data]).promise();
}
return getPromise(arguments);
}
).then(resolveFunc, rejectFunc);
}
return this._processQueue || getPromise([this]);
};

then的定义在【jquery.js】

then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {
var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply( this, arguments );
if ( returned && jQuery.isFunction( returned.promise ) ) {
returned.promise()
.done( newDefer.resolve )
.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
},

然后又回到之前的add函数，调用$this.fileupload

add: function (e, data) {
var $this = $(this);
data.process(function () {
return $this.fileupload('process', data);
});
originalAdd.call(this, e, data);
}

然后是【jquery.fileupload-process.js】

// Processes the files given as files property of the data parameter,
// returns a Promise object that allows to bind callbacks:
process: function (data) {
var that = this,
options = $.extend({}, this.options, data);
if (options.processQueue && options.processQueue.length) {
this._transformProcessQueue(options);

还是【jquery.fileupload-process.js】

// Replaces the settings of each processQueue item that
// are strings starting with an "@", using the remaining
// substring as key for the option map,
// e.g. "@autoUpload" is replaced with options.autoUpload:
_transformProcessQueue: function (options) {
var processQueue = [];

然后回到【jquery.fileupload.js】

// The add callback is invoked as soon as files are added to the fileupload
// widget (via file input selection, drag & drop, paste or add API call).
// If the singleFileUploads option is enabled, this callback will be
// called once for each file in the selection for XHR file uploads, else
// once for each file selection.
//
// The upload starts when the submit method is invoked on the data parameter.
// The data object contains a files property holding the added files
// and allows you to override plugin options as well as define ajax settings.
//
// Listeners for this callback can also be bound the following way:
// .bind('fileuploadadd', func);
//
// data.submit() returns a Promise object and allows to attach additional
// handlers using jQuery's Deferred callbacks:
// data.submit().done(func).fail(func).always(func);
add: function (e, data) {
if (e.isDefaultPrevented()) {
return false;
}

再回到

add: function (e, data) {
var $this = $(this);
data.process(function () {
return $this.fileupload('process', data);
});
originalAdd.call(this, e, data);
}

on('fileuploadadd', function (e, data) {
console.log(data.files);
console.log(data.files.length);
// add a <div/> under files container
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
console.log(index);
console.log(file);
//add a <p/> under div
var node = $('<p/>')
.append($('<span/>').text(file.name));

var flag = !index;
console.log(flag);
if (flag) {
//if upload multi files and split them by <br/>
node
.append('<br>')
//clone a button
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});

图片的preview功能是通过jquery.fileupload-image.js里面定义的processQueue来自动处理的

$.blueimp.fileupload.prototype.options.processQueue.unshift(
    {
        action: 'loadImageMetaData',
        disableImageHead: '@',
        disableExif: '@',
        disableExifThumbnail: '@',
        disableExifSub: '@',
        disableExifGps: '@',
        disabled: '@disableImageMetaDataLoad'
    },

processQueue依赖于jquery.fileupload-process.js中的定义

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

    options: {
        // The list of processing actions:
        processQueue: [
            /*
            {
                action: 'log',
                type: 'debug'
            }
            */
        ],

loadImage.parseMetaData依赖于load-image-meta.js中的parseMetaData

loadImageMetaData: function (data, options) {
    if (options.disabled) {
        return data;
    }
    var that = this,
        dfd = $.Deferred();
    loadImage.parseMetaData(data.files[data.index], function (result) {
        $.extend(data, result);
        dfd.resolveWith(that, [data]);
    }, options);
    return dfd.promise();
},

load-image-meta.js中的loadImage.blobSlice 依赖于load-image.js

jquery.fileupload-image.js中resizeImage函数中的loadImage.scale依赖于load-image-scale.js

if (img) {
resolve(loadImage.scale(img, options));
return dfd.promise();
}