jQuery file upload上传图片出错分析

以https://github.com/blueimp/jQuery-File-Upload/blob/master/basic-plus.html为例

注释掉load-image.all.min.js

<!--script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script-->

jquery.fileupload-image.js:279 Uncaught TypeError: Cannot read property 'parseMetaData' of undefined
at $.<computed>.<computed>.loadImageMetaData (jquery.fileupload-image.js:279)
at $.<computed>.<computed>.func (jquery.fileupload-process.js:84)
at $.<computed>.<computed>.<anonymous> (jquery.js:3305)
at fire (jquery.js:3148)
at Object.add [as done] (jquery.js:3194)
at Array.<anonymous> (jquery.js:3304)
at Function.each (jquery.js:384)
at Object.<anonymous> (jquery.js:3301)
at Function.Deferred (jquery.js:3361)
at Object.then (jquery.js:3300)

jquery.fileupload-process.js:84

_processFile: function (data, originalData) {这个函数中

return that.processActions[settings.action].call(
    that,
    data,
    settings
);

jquery.fileupload-process.js:153

_processFile函数，被process函数调用

// Processes the files given as files property of the data parameter,
// returns a Promise object that allows to bind callbacks:
process: function (data) {

$.each(data.files, function (index) {
    var opts = index ? $.extend({}, options) : options,
        func = function () {
            if (data.errorThrown) {
                return $.Deferred()
                        .rejectWith(that, [data]).promise();
            }
            return that._processFile(opts, data);
        };

 

jquery.fileupload.js:217

// 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;
    }
    if (data.autoUpload || (data.autoUpload !== false &&
$(this).fileupload('option', 'autoUpload'))) {
        data.process().done(function () {
            data.submit();
        });
    }
},

 先执行$(this).fileupload('option', 'autoUpload')，触发了jquery.ui.widget.js中的代码

var widget_uuid = 0,
   widget_slice = Array.prototype.slice;

$.fn[ name ] = function( options ) {
//对三个变量进行赋值
   var isMethodCall = typeof options === "string",
      args = widget_slice.call( arguments, 1 ),
      returnValue = this;

这里的name是fileupload，options是option

arguments有2个元素， 0:option， 1:autoUpload

args经过赋值之后是autoUpload

if ( isMethodCall ) {
   this.each(function() {
      var methodValue,
         instance = $.data( this, fullName );

fullName是blueimp-fileupload

经过赋值后

data函数调用触发了jquery中的函数

data: function( elem, name, data ) {
return internalData( elem, name, data );
},

elem是id为fileupload的input控件

name是blueimp-fileupload

经过赋值后，instance是fileupload的一个对象，这个对象包含一些数组元素，比如option

if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
   return $.error( "no such method '" + options + "' for " + name + " widget instance" );
}

instance[options]是一个函数,这个函数是jquery.ui.widget.js中定义的，因为blueimp-fileupload扩展了，所以blueimp-fileupload也包含这么一个函数

option: function( key, value ) {
   var options = key,
      parts,
      curOption,
      i;

args经过赋值之后是autoUpload
methodValue = instance[ options ].apply( instance, args );

因为上面的apply调用只传递了一个参数autoUpload

option: function( key, value ) {
var options = key,
parts,
curOption,
i;

else {
   if ( arguments.length === 1 ) {
      return this.options[ key ] === undefined ? null : this.options[ key ];
   }

返回的methodValue是false