upload.js 3.47 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
  };

  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(',');
    }
    $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);
      if (true === settings.validate_extensions && $.inArray(ext, settings.valid_extensions) == -1) {
        settings.onComplete.apply($element, [{
          status: false,
          message: '文件类型无效.只支持' + settings.valid_extensions.join(',')
        }, settings.params]);
      } else {
        uploading_file = true;
        wrapElement($element);
        var ret = settings.onStart.apply($element, [settings.params]);
        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 = $;