궁금해요
왼쪽의 그림에서 파일선택을 클릭하여 이미지파일을 선택하면 오른쪽그림처럼 밑부분에 해당
그림이 미리보기처럼 나오게하였습니다
파일선택의 오른쪽에있는 취소버튼을 누르면 파일선택부분을 초기화시켜 선택한파일이없게해주었구요
여기까진잘되는대 취소를 한다음 다시 파일선택에서 이미지파일을 선택하면 동작이안됩니다...
이미지파일선택하는걸 input type="file"에 change함수로 했는대 취소이후에는 change액션이 동작을안하네요 ㅠㅠ
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#blah").hide();
var domEleArray = [$('#imgInp').clone()];
function readURL(input) { // change에서 사용되는 그림을 보여주는함수
if (input.files && input.files[0]) {
var reader = new FileReader(); //파일을 읽기 위한 FileReader객체 생성
reader.onload = function (e) {
//파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
$("#blah").show();
$('#blah').attr('src', e.target.result);
//이미지 Tag의 SRC속성에 읽어들인 File내용을 지정
//(아래 코드에서 읽어들인 dataURL형식)
}
reader.readAsDataURL(input.files[0]);
//File내용을 읽어 dataURL형식의 문자열로 저장
}
}//readURL()--
//file 양식으로 이미지를 선택(값이 변경) 되었을때 처리하는 코드
$("#imgInp").change(function(){ // 이미지 선택했을때
alert("change");
readURL(this);
});
$('#filecancle').click(function() { //취소버튼눌렀을때 파일업로드칸 선택한거 비우기
domEleArray[1] = domEleArray[0].clone(true); // 쌔거(0번) -> 복사(1번)
$('#imgInp').replaceWith(domEleArray[1]);
$("#blah").hide();
});
});
</script>
</head>
<body>
<center>
<font color="blue" size="22">리뷰 등록</font><br> <br>
<form action="review.do?action=insert" method="post"
enctype="multipart/form-data">
<table border="2" cellpadding="1" width="500" align="center">
<tr>
<td align="center" width="80px">작성자</td>
<td align="center" width="420px">${session.id}</td>
</tr>
<tr>
<td colspan="2"><input type="file" id="imgInp" name="file" accept=".gif, .jpg, .png">
<input type="button" value="취소" id="filecancle" /></td>
<tr>
<td align="center" width="80px">제목</td>
<td width="420px"><input type="text" name="title" border="0" size="57"></td>
</tr>
<tr>
<td colspan="2" align="center"> <img id="blah" src="#" />
<textarea rows="27" cols="71" name="contents" id="contents"> </textarea></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="등록" />
<input type="button" value="취소" onclick="location.href='review.do'" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
취소 시 파일 컴포넌트를 대체하여 기존 이벤트가 적용 되지 않아서 발생한 현상 입니다.