이 예제에서는 multiple 속성을 이용하였다.
multiple 속성은 한번에 파일을 여러개 올릴 수 있도록 해주는 속성이다.
multiple 속성은 크롬은 6.0 이상 IE는 10.0 이상부터 지원한다고 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>첨부파일 미리보기</h1>
<hr>
<table border="1">
<tr>
<th align="center" bgcolor="orange" width="500px">첨부파일</th>
</tr>
<tr>
<td align="center">
<input type="file" name="uploadFile" id="uploadFile" multiple>
<div id="preview"></div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(document).ready(function (e){
$("input[type='file']").change(function(e){
//div 내용 비워주기
$('#preview').empty();
var files = e.target.files;
var arr =Array.prototype.slice.call(files);
//업로드 가능 파일인지 체크
for(var i=0;i<files.length;i++){
if(!checkExtension(files[i].name,files[i].size)){
return false;
}
}
preview(arr);
});//file change
function checkExtension(fileName,fileSize){
var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");
var maxSize = 20971520; //20MB
if(fileSize >= maxSize){
alert('파일 사이즈 초과');
$("input[type='file']").val(""); //파일 초기화
return false;
}
if(regex.test(fileName)){
alert('업로드 불가능한 파일이 있습니다.');
$("input[type='file']").val(""); //파일 초기화
return false;
}
return true;
}
function preview(arr){
arr.forEach(function(f){
//파일명이 길면 파일명...으로 처리
var fileName = f.name;
if(fileName.length > 10){
fileName = fileName.substring(0,7)+"...";
}
//div에 이미지 추가
var str = '<div style="display: inline-flex; padding: 10px;"><li>';
str += '<span>'+fileName+'</span><br>';
//이미지 파일 미리보기
if(f.type.match('image.*')){
var reader = new FileReader(); //파일을 읽기 위한 FileReader객체 생성
reader.onload = function (e) { //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
//str += '<button type="button" class="delBtn" value="'+f.name+'" style="background: red">x</button><br>';
str += '<img src="'+e.target.result+'" title="'+f.name+'" width=100 height=100 />';
str += '</li></div>';
$(str).appendTo('#preview');
}
reader.readAsDataURL(f);
}else{
str += '<img src="/resources/img/fileImg.png" title="'+f.name+'" width=100 height=100 />';
$(str).appendTo('#preview');
}
});//arr.forEach
}
});
</script>
</html>
input type은 file인 것을 찾아 change 옵션을 주었다.
첨부파일을 등록할 때마다 div#preview의 내용을 비워주고, 업로드 가능한 파일인지 체크 후 jQuery로 이미지 미리보기를 만들어 준다.
이미지 파일일 때는 이미지를 보여주고, 이미지 파일이 아닐 때는 파일 이미지를 보여주도록 만들었다.
'프로그래밍 > jQuery & javaScript' 카테고리의 다른 글
| jqGrid 사용 예제 (v5.3.2, v4.4.3) (2) | 2019.07.17 |
|---|---|
| jQuery 이미지 클릭 시 크게 보기 (9) | 2019.06.26 |
| jQuery 동적태그 이벤트 (0) | 2019.06.21 |
| jQuery Select Box 컨트롤 (내용 추가, 삭제 등) (0) | 2019.06.12 |
| jQuery 회원가입 정규식표현 유효성 검사(자주쓰는 정규표현식 정리) (9) | 2019.06.05 |
