input file 프리뷰 하나씩 추가가 안됩니다.

input file 프리뷰 하나씩 추가가 안됩니다.

QA

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>

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 21
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT