> 웹 프론트엔드 > JS 튜토리얼 > 자체 제작 파일 업로드 JS 컨트롤은 IE, Chrome, Firefox etc_javascript 기술을 지원할 수 있습니다.

자체 제작 파일 업로드 JS 컨트롤은 IE, Chrome, Firefox etc_javascript 기술을 지원할 수 있습니다.

WBOY
풀어 주다: 2016-05-16 16:51:48
원래의
1189명이 탐색했습니다.
复代码码 代码如下:

(function() {
if (window.FileUpload) {
return;
}
window.FileUpload = 함수(id, url) {
this.id = id;
this.autoUpload =
this.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 != 정의되지 않음;
};

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", response)
}
});
}
var form = $("#" this.id).closest("form")[0];
form.target = 'uploadFrame';
양식.제출();
};

FileUpload.prototype._uploadUsingFormData = 함수(파일) {
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) < 0) {
$(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 = 함수(핸들러) {
$(this).bind("onProgress", function(sender, loading, total) {
handler && handler(loaded, total) )
});
};

FileUpload.prototype.onError = 함수(핸들러) {
$(this).bind("onError", function(sender, error) {
handler && handler(error);
});
};

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

FileUpload.prototype.onExtensionError = 함수(핸들러) {
$(this).bind("onExtensionError", handler);
};
})();
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿