input file 프리뷰 하나씩 추가가 안됩니다. 채택완료

</strong></p>

<p> </p>

<p><div class="filebox clearfix"></p>

<p>                                <div class="inputFile"></p>

<p>                                    <label for="AddImgs" class="addImgBtn">+</label></p>

<p>                                    <input type="file" id="AddImgs" class="upload-hidden" accept=".jpg, .png, .gif"</p>

<p>                                        multiple></p>

<p>                                </div></p>

<p>                                <ul id="Preview" class="sortable"></ul></p>

<p>                            </div></p>

<p> </p>

<p><script></p>

<p>//드래그 앤 드롭</p>

<p>                        $(".sortable").sortable();</p>

<p> </p>

<p>                        //이미지 등록</p>

<p>                        $("#AddImgs").change(function (e) {</p>

<p>                            //div 내용 비워주기</p>

<p>                            $('#Preview').empty();</p>

<p> </p>

<p>                            var files = e.target.files;</p>

<p>                            var arr = Array.prototype.slice.call(files);</p>

<p> </p>

<p>                            //업로드 가능 파일인지 체크</p>

<p>                            for (var i = 0; i < files.length; i++) {</p>

<p>                                if (!checkExtension(files[i].name, files[i].size)) {</p>

<p>                                    return false;</p>

<p>                                }</p>

<p>                            }</p>

<p>                            preview(arr);</p>

<p> </p>

<p>                            function checkExtension(fileName, fileSize) {</p>

<p>                                var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");</p>

<p>                                var maxSize = 20971520; //20MB</p>

<p> </p>

<p>                                if (fileSize >= maxSize) {</p>

<p>                                    alert('이미지 크기가 초과되었습니다.');</p>

<p>                                    $("#AddImgs").val(""); //파일 초기화</p>

<p>                                    return false;</p>

<p>                                }</p>

<p> </p>

<p>                                if (regex.test(fileName)) {</p>

<p>                                    alert('확장자명을 확인해주세요.');</p>

<p>                                    $("#AddImgs").val(""); //파일 초기화</p>

<p>                                    return false;</p>

<p>                                }</p>

<p>                                return true;</p>

<p>                            }</p>

<p> </p>

<p>                            function preview(arr) {</p>

<p>                                arr.forEach(function (f) {</p>

<p>                                    //파일명이 길면 파일명...으로 처리</p>

<p>                                    /*</p>

<p>                                    var fileName = f.name;</p>

<p>                                    if(fileName.length > 10){</p>

<p>                                        fileName = fileName.substring(0,7)+"...";</p>

<p>                                    }</p>

<p>                                    */</p>

<p> </p>

<p>                                    //div에 이미지 추가</p>

<p>                                    var str = '<li class="ui-state-default">';</p>

<p>                                    //str += '<span>'+fileName+'</span>
';</p>

<p> </p>

<p>                                    //이미지 파일 미리보기</p>

<p>                                    if (f.type.match('image.*')) {</p>

<p>                                        //파일을 읽기 위한 FileReader객체 생성</p>

<p>                                        var reader = new FileReader();</p>

<p>                                        reader.onload = function (e) {</p>

<p>                                            //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러</p>

<p>                                            str += '<img src="' + e.target.result +</p>

<p>                                                '" title="' + f.name +</p>

<p>                                                '" width=80 height=80>';</p>

<p>                                            str +=</p>

<p>                                                '<span class="delBtn" onclick="delImg(this)">x</span>';</p>

<p>                                            str += '</li>';</p>

<p>                                            $(str).appendTo('#Preview');</p>

<p>                                        }</p>

<p>                                        reader.readAsDataURL(f);</p>

<p>                                    } else {</p>

<p>                                        //이미지 파일 아닐 경우 대체 이미지</p>

<p>                                        /*</p>

<p>                                        str += '<img src="/resources/img/fileImg.png" title="'+f.name+'" width=60 height=60 />';</p>

<p>                                        $(str).appendTo('#Preview');</p>

<p>                                        */</p>

<p>                                    }</p>

<p>                                })</p>

<p>                            }</p>

<p>                        })</p>

<p> </p>

<p>                        //이미지 삭제</p>

<p>                        function delImg(_this) {</p>

<p>                            $(_this).parent('li').remove()</p>

<p>                        }</p>

<p></script></p>

<p><strong>