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

前端技术 2023/09/02 JavaScript
复制代码 代码如下:

(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);
};
})();

本文地址:https://www.stayed.cn/item/4750

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。