自制的文件上传JS控件可支持IE、chrome、firefox etc

复制代码 代码如下:

  (function() {

  if (window.FileUpload) {

  return;

  }

  window.FileUpload = function (id, url) {

  this.id = id;

  this.autoUpload = true;

  this.url = url;

  this.maxSize = null;

  this.extensions = null;

  this.dropId = null;

  };

  window.FileUpload.prototype.init = function() {

  var obj = this;

  $('#' + this.id).change(function () {

  if (obj.autoUpload) {

  obj.upload();

  }

  });

  if (this.supportsFormData()) {

  if (this.dropId != null) {

  var drop = $('#' + this.dropId)[0];

  drop.addEventListener("dragover", function(e) {

  e.stopPropagation();

  e.preventDefault();

  $('#' + obj.dropId).addClass("dragover");

  }, false);

  drop.addEventListener("dragout", function(e) {

  $('#' + obj.dropId).removeClass("dragover");

  }, false);

  drop.addEventListener("drop", function(e) {

  e.stopPropagation();

  e.preventDefault();

  $('#' + obj.dropId).removeClass("dragover");

  obj._uploadUsingFormData(e.dataTransfer.files[0]);

  }, false);

  }

  } else {

  if (this.dropId != null) {

  $('#' + this.dropId).hide();

  }

  }

  };

  FileUpload.prototype.supportsFormData = function() {

  return window.FormData != undefined;

  };

  FileUpload.prototype.upload = function() {

  if (this.supportsFormData()) {

  this._uploadUsingFormData($("#" + this.id)[0].files[0]);

  } else {

  this._uploadUsingFrame();

  }

  };

  FileUpload.prototype._uploadUsingFrame = function() {

  var obj = this;

  var $frame = $('#uploadFrame');

  if ($frame.length == 0) {

  $frame = $('<iframe id="uploadFrame" width="0" height="0" name="uploadFrame" src=""></iframe>');

  $frame.appendTo("body");

  $frame.load(function() {

  var response = $frame.contents().text();

  try {

  var json = $.parseJSON(response);

  $(obj).trigger("onLoad", json);

  } catch(ex) {

  $(obj).trigger("onError", response);

  }

  });

  }

  var form = $("#" + this.id).closest("form")[0];

  form.target = 'uploadFrame';

  form.submit();

  };

  FileUpload.prototype._uploadUsingFormData = function (file) {

  var obj = this;

  var xhr = new XMLHttpRequest();

  xhr.addEventListener("load", function (e) {

  var json = $.parseJSON(xhr.response);

  $(obj).trigger("onLoad", json);

  }, false);

  xhr.addEventListener("error", function (e) {

  $(obj).trigger("onError", e);

  }, false);

  xhr.upload.addEventListener("progress", function (e) {

  if (e.lengthComputable) {

  $(obj).trigger("onProgress", e.loaded, e.total);

  }

  }, false);

  xhr.open("POST", obj.url);

  if (obj.maxSize != null&&file.size>obj.maxSize) {

  $(obj).trigger("onMaxSizeError");

  return;

  }

  if (obj.extensions != null) {

  var name = file.name;

  var ext = name.substring(name.lastIndexOf("."), name.length).toLowerCase();

  if (obj.extensions.indexOf(ext) < 0) {

  $(obj).trigger("onExtensionError");

  return;

  }

  }

  var formData = new FormData();

  formData.append("files", file);

  xhr.send(formData);

  };

  FileUpload.prototype.onLoad = function(handler) {

  $(this).bind("onLoad", function(sender, args) {

  handler && handler(args);

  });

  };

  FileUpload.prototype.onProgress = function (handler) {

  $(this).bind("onProgress", function(sender, loaded, total) {

  handler && handler(loaded, total);

  });

  };

  FileUpload.prototype.onError = function (handler) {

  $(this).bind("onError", function(sender, error) {

  handler && handler(error);

  });

  };

  FileUpload.prototype.onMaxSizeError = function(handler) {

  $(this).bind("onMaxSizeError", handler);

  };

  FileUpload.prototype.onExtensionError = function (handler) {

  $(this).bind("onExtensionError", handler);

  };

  })();