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

复制代码如下代码：

(function() {
if (window.FileUpload) {
返回;
}
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]);
}，假）；
}
} 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 = $('');
$frame.appendTo("body");
$frame.load(function() {
var response = $frame.contents().text();
尝试 {
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);
}，假）；
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) ;
}
}，假）；
xhr.open("POST", obj.url);

if (obj.maxSize != null&&file.size>obj.maxSize) {
$(obj).trigger("onMaxSizeError");
返回；
}
if (obj.extensions != null) {
var name = file.name;
var ext = name.substring(name.lastIndexOf("."), name.length).toLowerCase();
if (obj.extensions.indexOf(ext) $(obj).trigger("onExtensionError");
返回；
}
}
var formData = new FormData();
formData.append("文件", 文件);
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, returned, 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);
}；
})();