-
[jQuery] 업로드 전 이미지 파일 미리보기( URL.createObjectURL API 이용 ) (jquery-file-input-image-preview-before)■ 아빠 프로그래밍/Jquery | javascript 2017. 11. 30. 02:12반응형
[펌] 자바 킹 블로그 - https://m.blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220174764991&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F
[참고] Web API Interfaces
URL.createObjectURL
특정 파일 객체나 로컬 파일 또는 데이터의 참조를 가리키는 새로운 객체 URL을 생성한다.생성한 값은 현재 창이나, 객체를 생성한 문서 내에서만 유효하다.새 객체 URL은 특정 File 객체나 Blob 객체로 표현할 수 있다.var blobURL = window.URL.createObjectURL(blob);매개변수로 전달한 blob는 URL을 생성할 File 객체나 Blob 객체이다.생서된 objectURL은 해당 파일의 전체 내용을 URL 텍스트로 변환한 값이다.객체의 URL의 사용을 마쳤다면, 아래 메서드를 호출해 메모리에서 해제해주는 것이 좋다.window.URL.revokeObjectURL(blobURL);
[코드]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Event</title>
<style>
body {
margin: 20px;
font-family: "맑은 고딕";
}
#image_preview {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form>
<p>
<label for="image">Image:</label>
<br />
<input type="file" name="image" id="image" />
</p>
</form>
<div id="image_preview">
<img src="#" />
<br />
<a href="#">Remove</a>
</div>
<script type="text/javascript">
/**
onchange event handler for the file input field.
It emplements very basic validation using the file extension.
If the filename passes validation it will show the image using it's blob URL
and will hide the input field and show a delete button to allow the user to remove the image
*/
$('#image').on('change', function() {
ext = $(this).val().split('.').pop().toLowerCase(); //확장자
//배열에 추출한 확장자가 존재하는지 체크
if($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
resetFormElement($(this)); //폼 초기화
window.alert('이미지 파일이 아닙니다! (gif, png, jpg, jpeg 만 업로드 가능)');
} else {
file = $('#image').prop("files")[0];
blobURL = window.URL.createObjectURL(file);
$('#image_preview img').attr('src', blobURL);
$('#image_preview').slideDown(); //업로드한 이미지 미리보기
$(this).slideUp(); //파일 양식 감춤
}
});
/**
onclick event handler for the delete button.
It removes the image, clears and unhides the file input field.
*/
$('#image_preview a').bind('click', function() {
resetFormElement($('#image')); //전달한 양식 초기화
$('#image').slideDown(); //파일 양식 보여줌
$(this).parent().slideUp(); //미리 보기 영역 감춤
return false; //기본 이벤트 막음
});
/**
* 폼요소 초기화
* Reset form element
*
* @param e jQuery object
*/
function resetFormElement(e) {
e.wrap('<form>').closest('form').get(0).reset();
//리셋하려는 폼양식 요소를 폼(<form>) 으로 감싸고 (wrap()) ,
//요소를 감싸고 있는 가장 가까운 폼( closest('form')) 에서 Dom요소를 반환받고 ( get(0) ),
//DOM에서 제공하는 초기화 메서드 reset()을 호출
e.unwrap(); //감싼 <form> 태그를 제거
}
</script>
</body>
</html>[IE11, chrome에서 테스트. ]
Chrome =>
IE11 =>
[참고] 관련포스트
반응형'■ 아빠 프로그래밍 > Jquery | javascript' 카테고리의 다른 글
실수 계산 (float 계산) (0) 2018.01.10 [jQuery] SelectBox 제어, 사용법 [펌] (0) 2017.12.07 숫자 3자리마다 콤마찍기 (정규식 사용) (0) 2017.12.07 TEXTAREA 줄바꿈/엔터 치환 (0) 2017.11.27 jquery 자주쓰는 함수모음 (0) 2017.08.22
