var progress = document.querySelector('.percent');
var insPic =
(function loadImageFile() {
if (window.FileReader) {
var ImagePre;
var ImgReader = new window.FileReader();
var fileType = /^(?:image\/bmp|image\/gif|image\/jpeg|image\/png|image\/x\-xwindowdump|image\/x\-portable\-bitmap)$/i;
progress.style.width = '0%';
progress.textContent = '0%';
ImgReader.onerror = errorHandler;
ImgReader.onprogress = updateProgress;
ImgReader.onabort = function(e) { alert('File read cancelled'); };
ImgReader.onloadstart = function(e) { document.getElementById('progress_bar').className = 'loading'; };
ImgReader.onload = function (Event) {
if (!ImagePre) {
var newPreview = document.getElementById("Preview");
ImagePre = new Image();
//ImagePre.style.width = "75px";
//ImagePre.style.height = "75px";
newPreview.appendChild(ImagePre);
}
ImagePre.src = Event.target.result;
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').setAttribute('class', 'collapse');", 2000);
};
return function () {
var img = document.getElementById("picture").files;
if (!fileType.test(img[0].type)) {
alert("이미지 파일을 업로드 하세요");
return;
}
ImgReader.readAsDataURL(img[0]);
}
}
document.getElementById("Preview").src = document.getElementById("picture").value;
})();
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}