upload.js 6.5 KB
var $ = require('jquery');

$.fn.ajaxfileupload = function(options) {
  var settings = {
    params: {},
    action: '',
    onStart: function() {},
    onComplete: function(response) {},
    onCancel: function() {},
    validate_extensions: true,
    valid_extensions: ['gif', 'png', 'jpg', 'jpeg'],
    submit_button: null,

        // 图片规格 width * heith,单位px, 默认不限制
    valid_spec: false,
    width_limit: 0,   
    height_limit: 0
  };

  var uploading_file = false;

  if (options) {
    $.extend(settings, options);
  }


  return this.each(function() {
    var $element = $(this);
    if ($element.data('ajaxUploader-setup') === true) return;

    //
    var ext = $element.attr("extend")
    if (ext) {
      settings.valid_extensions = ext.split(',');
    }

  var spec = $element.attr("spec");
    if (spec) {
      var array = spec.split('*');
        if (array.length == 2) {
        settings.width_limit = parseInt(array[0]);
        settings.height_limit = parseInt(array[1]);
        }
        
        if (settings.width_limit != 0 && settings.height_limit != 0) {
         settings.valid_spec = true;
        }
    }

    var bucket = $element.attr("bucket");
    if(bucket){
      settings.params.bucket=bucket;
    }
    console.log(settings.params);

    $element.change(function() {
      uploading_file = false;
      if (settings.submit_button == null) {
        upload_file();
      }
    });

    if (settings.submit_button == null) {} else {
      settings.submit_button.click(function(e) {
        e.preventDefault();
        if (!uploading_file) {
          upload_file();
        }
      });
    }

    var upload_file = function() {
      if ($element.val() == '') return settings.onCancel.apply($element, [settings.params]);

      var ext = $element.val().split('.').pop().toLowerCase();
      console.log(settings.validate_extensions);

        var files = $element[0].files;
    if (files) {
     $.each(files, function(index, file) {          
      // 加载图片,为了获取图片大小
      var windowURL = window.URL || window.webkitURL;
          var dataURL = windowURL.createObjectURL(file);
      
          var frame_id = 'preview-' + Math.round(new Date().getTime());
          $('<img id="' + frame_id +'"  style="display:none" />').appendTo('body').attr("src", dataURL); 
          var img = $('#' + frame_id)[0];
//          if (img.complete) { 
//            alert("加载完成");
//          }
//      else {
          img.onload = function() {
            // var width = img.offsetWidth,
           //        height = img.offsetHeight;
              var width = $(img).width(),
                  height = $(img).height();
      
              if (settings.valid_spec == true
                  && (Math.abs(width - settings.width_limit) > 10
                || Math.abs(height - settings.height_limit) > 10) ) {
              // 图片规格超出限制
              settings.onComplete.apply($element, [{
                         status: false,
                         message: '只允许上传' + settings.width_limit + '*' + settings.height_limit + '的文件,第' + (index+1) + '个文件不符合要求'
                     }, settings.params]);
                     var _$element = $element.clone();
                     var _$parent = $element.parent();
                     $element.remove();
                     _$parent.append(_$element);
                     _$element.ajaxfileupload(settings);
            }
//          }
      };
        
      
      if (file.size / 1024 > settings.size_limit) {
        // 上传大小超出限制。
        settings.onComplete.apply($element, [{
                   status: false,
                   message: '只允许上传大小' + settings.size_limit + 'KB以内的文件,第' + (index + 1) + '个文件不符合要求'
               }, settings.params]);
               var _$element = $element.clone();
               var _$parent = $element.parent();
               $element.remove();
               _$parent.append(_$element);
               _$element.ajaxfileupload(settings);
         return;
      }   
    });
  }

      if (true === settings.validate_extensions && $.inArray(ext, settings.valid_extensions) == -1) {
        settings.onComplete.apply($element, [{
          status: false,
          message: '文件类型无效.只支持' + settings.valid_extensions.join(',')
        }, settings.params]);
        var _$element = $element.clone();
        var _$parent = $element.parent();
        $element.remove();
        _$parent.append(_$element);
        _$element.ajaxfileupload(settings);
        
      } else {
        uploading_file = true;
        var ret = settings.onStart.apply($element, [settings.params]);
        wrapElement($element);
        if (ret !== false) {
          $element.parent('form').submit(function(e) {
            e.stopPropagation();
          }).submit();
        }
      }
    };
    $element.data('ajaxUploader-setup', true);
    var handleResponse = function(loadedFrame, element) {
      var response, responseStr = $(loadedFrame).contents().text();
      try {
        response = JSON.parse(responseStr);
      } catch (e) {
        response = responseStr;
      }
      element.siblings().remove();
      element.unwrap();

      uploading_file = false;

      settings.onComplete.apply(element, [response, settings.params]);
      var _$element = $element.clone();
      var _$parent = $element.parent();
      $element.remove();
      _$parent.append(_$element);
      _$element.ajaxfileupload(settings);
    };
    var wrapElement = function(element) {
      var frame_id = 'ajaxUploader-iframe-' + Math.round(new Date().getTime() / 1000)
      $('body').after('<iframe width="0" height="0" style="display:none;" name="' + frame_id + '" id="' + frame_id + '"/>');
      $('#' + frame_id).get(0).onload = function() {
        handleResponse(this, element);
      };
      element.wrap(function() {
          return '<form action="' + settings.action + '" method="POST" enctype="multipart/form-data" target="' + frame_id + '" />'
        })
        .before(function() {
          var key, html = '';
          for (key in settings.params) {
            var paramVal = settings.params[key];
            if (typeof paramVal === 'function') {
              paramVal = paramVal();
            }
            html += '<input type="hidden" name="' + key + '" value="' + paramVal + '" />';
          }
          html += '<input type="hidden" name="filename" value="' + $element.attr("name") + '" />'
          return html;
        });
    }

  });
}


module.exports = $;