Question

<input type='file' class="img-input" id="add-img-1" onchange="show_img(this);" />

我们怎样才能通过这个＆＃39;手动输入到函数的文件的选择器？
像这样：

$('input.img-input').fileValidator({
        onValid :     function(){ show_img( $(this) ); },
        type:        'image',
        maxSize:      '1m'
});

这不是你的工作，我也尝试传递输入的id ..但没有运气。任何人都可以帮助我吗？

这是jsFiddle：http://jsfiddle.net/z8y2s/16/

Answer 1

您需要在call内部传递此功能，以便valid回调可以使用它。

(function($){

  validFile = true;

  $.fileValidator = function(options){
    var validations = [];
    var onInvalid = options.onInvalid;
    var onValid = options.onValid;


    for (var key in $.fileValidator.validations){
      if (!options[key]){ continue; }
      validations.push( $.fileValidator.validations[key](options[key], onInvalid, onValid));
    }


    return function(file){
      for(var i=0, len = validations.length; i < len; i++){
        validations[i].call(this, file);
      }
      if(validFile){onValid.call(this);}
    };
  };

  $.fileValidator.validations = {
    maxSize: function(maxSize, invalid, valid){
      if( typeof maxSize == 'string' ){ 
        maxSize = $.fileValidator.sizeToBytes(maxSize);
      }

      return function(file){
        if (file.size > maxSize){ invalid.call(this,'maxSize',file); validFile = false; }
      };
    },

    type: function(contentType, invalid, valid){
      var isValid;
      if( typeof contentType == 'function' ){ 
        isValid = contentType; 
      } else if (contentType.constructor === RegExp ) { 
        isValid = function(type){ return type.match(contentType); }; 
      } else { 
        isValid = function(type){ return ~type.indexOf(contentType); }; 
      }

      return function(file){
        if (!isValid(file.type)) { invalid.call(this,'type', file); validFile = false; }
      };
    }
  };

  $.fn.fileValidator = function(userOptions) {
        var options = $.extend({
          // Validations
          maxSize: null,
          type: null,

          // Callbacks
          onValidation: $.fileValidator.doNothing,
          onInvalid: $.fileValidator.doNothing,
      onValid: $.fileValidator.doNothing
        }, userOptions);

        return this.each(function() {
            var el = $(this);
            var validator = $.fileValidator( $.extend({}, options, el.data()) );

          el.bind('change', function(event){
            var files = this.files || [];
            options.onValidation.call(this, files);
            for(var i=0, len=files.length; i < len; i++){
              validator.call(this, files[i]);
            }
          });
        });     
    };

  $.fileValidator.doNothing   = function doNothing(){};
  $.fileValidator.sizeToBytes = function sizeToBytes(size){
    var scale = 1;

    if (~ size.indexOf('k')){ 
      scale = 1024; 
    } else if (~ size.indexOf('m')){ 
      scale = 1024 * 1024; 
    } else if (~ size.indexOf('g')){ 
      scale = 1024 * 1024 * 1024; 
    }
    return parseInt(size,10) * scale;
  };
})( jQuery );

请参阅this时调用onValid（第21行）

Demo

Answer 2

在这样的函数中传递一个参数：

function(el){ show_img( $(el) );

整个代码：

$('input.img-input').fileValidator({
        onValid :     function(el){ show_img( $(el) ); },
        type:        'image',
        maxSize:      '1m'
});

Answer 3

试试这个

$('input.img-input').fileValidator({
   onInvalid:    function(type, file){ show_img(file); },
   maxSize:      '1m'
});

手动传递'This'jquery选择器

3 个答案: