自作のファイルアップロードJSコントロールはIE、chrome、firefoxなどをサポート可能_javascriptスキル

复制代码代码如下:

(function() {
if (window.FileUpload) {
return;
}
window.FileUpload = function (id, url) {
this.autoUpload = true;
this.maxSize = null;
this.extensions = 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) {
vardrop = $('#' this.dropId)[0];
drop.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
$('#' obj.dropId).addClass("ドラッグオーバー");
}, false);
drop.addEventListener("ドラッグアウト", function(e) {
$('#' obj.dropId).removeClass("ドラッグオーバー");
}, 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 != 未定義;
};

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();
try {
var json = $.parseJSON(response);
$(obj).trigger("onLoad", json);
} catch(ex) {
$(obj).trigger("onError", 応答);
}
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 (ハンドラー) {
$(this).bind("onProgress", function(送信者, ロード済み, 合計) {
ハンドラー && ハンドラー(ロード済み, 合計) );
});
};

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 (ハンドラー) {
$(this).bind("onExtensionError", ハンドラー);
};
})();