사진 미리보기

1.js

//사진미리보기
var InputImage =
(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;

ImgReader.onload = function (Event) {
if (!ImagePre) {
var newPreview = document.getElementById("imagePreview");
ImagePre = new Image();
ImagePre.style.width = "100px";
ImagePre.style.height = "100px";
var changePreview = document.getElementById("changePreview");
newPreview.removeChild(changePreview);
newPreview.appendChild(ImagePre);
}
ImagePre.src = Event.target.result;
};
return function () {
var img = document.getElementById("image").files;
if (!fileType.test(img[0].type)) {
alert("이미지 파일을 업로드 하세요");
return;
}
ImgReader.readAsDataURL(img[0]);
}
}
document.getElementById("imagePreview").src = document.getElementById("image").value;
})();
//사진미리보기 끝

//파일 유효성 검사

function click_event(){
if($("input:file[name='PHOTO_NAME']").val() == ""){
alert("사진을 입력하여 주세요.");
$("input:file[name='PHOTO_NAME']").focus();
return false;
}else{ //이미지 파일 외의 파일을 올릴 경우 제한//배열로 먼저 거를 확장자명 담음
var imgtypes = new Array("jpg", "jpeg", "png", "gif");

var str=$("input[name='PHOTO_NAME']").val();
//length로 inputfile로 받은 PHOTO_PATH의 총 길이 구하고
var len = str.length;
//lastindexof로 마지막에 .찍힌곳 인덱스 구함
var last = str.lastIndexOf(".");
//두 인덱스(len,last)로 substring을 통해 확장자를 뽑는거
var ext = str.substring(last + 1, len);

//구한 확장자 가지고 indexof로 배열에 있으면 해당 인덱스 값이 나오고 없으면 -1이 나오는거
if (imgtypes.indexOf(ext)==-1) {
alert("이미지 파일만 올려야합니다.");
$("input:file[name='PHOTO_NAME']").focus();
return false;
}

}

};
//유효성 검사 끝
>

2. 기본작성.php

3. 수정.php