自製的檔案上傳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.autoUpload = true
this.url = url; 🎜>this.autoUpload = true
this.url = url; 🎜 >this.maxSize = null;
this.extensions = null;
this.dropId = null;

window.FileUpload.prototype.init = function() {
var obj =這個;
$('#' 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(" DragmoveClass(" 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].文件[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);
$(obj).trigger("onLoad", json);
}，假）；
xhr.addEventListener("error", function (e) {
$(obj).trigger("onError", e);
},
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("檔案", 檔案);
}；
}；

FileUpload.prototype.onLoad = function(handler) {
$(this).bind("onLoad", function(sender, args) {
handler && handler(args);
});

FileUpload.prototype.onProgress = function (handler) {
$(this).bind("onProgress", function(發送者，返回，總計) {
handler && handler(loaded, Total ) );
});
};

FileUpload.prototype.onError = function (handler) {
$(this).bind("onError", function(sender, error) {
handler && handler(錯誤）；
}）；
}；

FileUpload.prototype.onMaxSizeError = function(handler) {
$(this).bind("onMaxSizeError", handler);
}；

FileUpload.prototype.onExtensionError = function (handler) {
$(this).bind("onExtensionError", handler);
};
})();