다중 이미지 업로드 미리보기 및 순서에 대해서 질문드립니다.

Question

안녕하세요 modal과 ajax를 이용해서 이미지를 등록하는 페이지를 만들던중 모르는게 있어서 질문드립니다.1. 아래의 소스코드와 같이 append에 li 태그에 추가되는 이미지에 attribute 'item'에 순서를 줘서순서를 바꿀 수 있게끔 만들었습니다. 2. 아래의 이미지를 보시면 분명히 이미지2~9까지 드래그 해서 나타냈지만클라이언트단의 미리보기에서 보여지는 이미지 순서와 서버로 전송했을때의 이미지 전송 순서가 틀립니다.ex) 그림을 보시면 미리보기 순서는 이미지6,7,2,3,4,5,8,9 이지만 서버단에서는 2~9까지 순서대로적용이 된다는거죠.... 3. 외 그런지 이유를 알고 싶습니다 브라우저별로 순서가 틀린건지.... 아니면 방법이 있는건지 궁금하네요혹시 해결방법 아시는분은 조그마한 팁이라도 정말 감사드리겠습니다^^ $(document).ready(function() { $('#uploadModalBtn').on('click', function() { $('#uploadModal').modal(); }); var storedFiles = []; //$('.cvf_order').hide(); // Apply sort function function cvf_reload_order() { var order = $('.cvf_uploaded_files').sortable('toArray', { attribute: 'item' }); $('.cvf_hidden_field').val(order); } function cvf_add_order() { $('.cvf_uploaded_files li').each(function(n) { $(this).attr('item', n); }); } $(function() { $('.cvf_uploaded_files').sortable({ cursor: 'move', placeholder: 'highlight', start: function(event, ui) { ui.item.toggleClass('highlight'); }, stop: function(event, ui) { ui.item.toggleClass('highlight'); }, update: function() { cvf_reload_order(); }, create: function() { var list = this; resize = function() { $(list).css('height', 'auto'); $(list).height($(list).height()); }; } }); $('.cvf_uploaded_files').disableSelection(); }); $('body').on('change', '.user_picked_files', function() { var files = this.files; var i = 0; for (i = 0; i < files.length; i++) { var readImg = new FileReader(); var file = files[i]; if (file.type.match('image.*')) { storedFiles.push(file); readImg.onload = (function(file) { return function(e) { $('.cvf_uploaded_files').append( "

" + "" + "" + "" + "

" + file.name + "

"); }; })(file); readImg.readAsDataURL(file); } else { alert('the file ' + file.name + ' is not an image'); location.reload(); } if (files.length === (i + 1)) { setTimeout(function() { cvf_add_order(); }, 1000); } } }); // Delete Image from Queue $('body').on('click', 'a.cvf_delete_image', function(e) { e.preventDefault(); $(this).parent().remove(''); var file = $(this).parent().attr('file'); for (var i = 0; i < storedFiles.length; i++) { if (storedFiles[i].name == file) { storedFiles.splice(i, 1); break; } } //cvf_reload_order(); }); // AJAX Upload $('body').on('click', '.cvf_upload_btn', function(e) { e.preventDefault(); cvf_reload_order(); //$(".cvf_uploaded_files").html('

'); var formdata = $('#uploadForm')[0]; var data = new FormData(formdata); var items_array = $('.cvf_hidden_field').val(); var items = items_array.split(','); for (var i in items) { var item_number = items[i]; data.append('files', storedFiles[item_number]); data.append('index', item_number); } $.ajax({ url: '${pageContext.request.contextPath}/upload_test', type: 'POST', contentType: false, data: data, processData: false, cache: false, success: function(result) { //이 부분을 수정해서 다양한 행동을 할 수 있으며, //여기서는 데이터를 전송받았다면 순수하게 OK 만을 보내기로 하였다. //-1 = 잘못된 확장자 업로드, -2 = 용량초과, 그외 = 성공(1) if (result === -1) { alert('jpg, gif, png, bmp 확장자만 업로드 가능합니다.'); // 이후 동작 ... } else if (result === -2) { alert('파일이 10MB를 초과하였습니다.'); // 이후 동작 ... } else { alert('이미지 업로드 성공'); location.reload(); // 이후 동작 ... } } }); });

치비 · Answer

셀프답변 남깁니다. storedFiles.push(file); 을return function(e) { storedFiles.push(file); }안에 넣어주시면 됩니다... 역시 삽질하면 되네요!! ㅋㅋ

초보사냥터 · Answer

혹시 이 코드 남아있으시면 보내주실수 있나요?? 이 홈페이지 처음이라 어떻게하는지 모르겠네요 ㅠㅠ

다중 이미지 업로드 미리보기 및 순서에 대해서 질문드립니다.

2개의 답변

#multiple 목록