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