input file 프리뷰 하나씩 추가가 안됩니다.
본문
이미지가 하나씩 추가되었으면 좋겠는데 그냥 서로 바뀌더라구요.
파일 선택할 때 한번에 선택하지 않으면 안되서요ㅠ
혹시 이미지 변경이 아닌 하나씩 추가되게 할수 있을까요?
<div class="filebox clearfix">
<div class="inputFile">
<label for="AddImgs" class="addImgBtn">+</label>
<input type="file" id="AddImgs" class="upload-hidden" accept=".jpg, .png, .gif"
multiple>
</div>
<ul id="Preview" class="sortable"></ul>
</div>
<script>
//드래그 앤 드롭
$(".sortable").sortable();
//이미지 등록
$("#AddImgs").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);
function checkExtension(fileName, fileSize) {
var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");
var maxSize = 20971520; //20MB
if (fileSize >= maxSize) {
alert('이미지 크기가 초과되었습니다.');
$("#AddImgs").val(""); //파일 초기화
return false;
}
if (regex.test(fileName)) {
alert('확장자명을 확인해주세요.');
$("#AddImgs").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 = '<li class="ui-state-default">';
//str += '<span>'+fileName+'</span><br>';
//이미지 파일 미리보기
if (f.type.match('image.*')) {
//파일을 읽기 위한 FileReader객체 생성
var reader = new FileReader();
reader.onload = function (e) {
//파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
str += '<img src="' + e.target.result +
'" title="' + f.name +
'" width=80 height=80>';
str +=
'<span class="delBtn" onclick="delImg(this)">x</span>';
str += '</li>';
$(str).appendTo('#Preview');
}
reader.readAsDataURL(f);
} else {
//이미지 파일 아닐 경우 대체 이미지
/*
str += '<img src="/resources/img/fileImg.png" title="'+f.name+'" width=60 height=60 />';
$(str).appendTo('#Preview');
*/
}
})
}
})
//이미지 삭제
function delImg(_this) {
$(_this).parent('li').remove()
}
</script>
답변을 작성하시기 전에 로그인 해주세요.
