uploadfile图片覆盖_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

data.context = $('

$.each(data.files, function (index, file) {

console.log(index);

console.log(file);

//add a

var node = $('

.append($('').text(file.name));

var flag = !index;

console.log(flag);

if (flag) {

//if upload multi files and split them by

node

.append('
')

//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();

}