영어가힘든개발자
172
2019-01-04 15:26:25
7
434

자바 스크립트 다중 이미지 등록 문제점


이미지 파일을 하나하나 등록 할때에는 전혀 문제가 없습니다. 하지만, 다중으로 이미지를 등록할 때 문제가 발생을 합니다.


우선 실행을 시켰을 때 아래와 같은 현상이 일어납니다.


만약 파일을 하나하나 업로드 했을 경우에는


위에 사진 두가지를 보시면 '파일명'이 다르다는 것을 알 수 있습니다.

첫번째 것의 경우 한꺼번에 4개의 파일을 동시에 선택했을 때 벌어지는 경우입니다.

두번째는 파일을 하나 업로드하면, 그다음거 업로드 하는 방식으로 했습니다.

*즉 문제점은 한꺼번에 파일을 올리게 되면, 파일명이 다르게 올라간다는 것입니다.

이제 소스코드를 보시겠습니다.

HTML

<div class="">
  <input type="file" id="jFileUpload" value="파일 선택" multiple>
  <p class="help-block">내 PC에 있는 사진 파일을 선택해 주십시오. 지원파일:JPG,JEPG,PNG,GIF | 최대 개수:10개</p>
  <div class="gallery jGallery"></div>
</div>

JS

$("#jFileUpload").change(function(){
     readURL(this);
});
		var i = 1;
		function readURL(input) {
			//파일 체크
			if (input.files) {
				//선택한 내용이 10개 이하인지 체크
				if(input.files.length < 11){
					
					for(var j =0; j<input.files.length; ++j){
						//이미지 파일 체크
						var check_file_type = ['jpg','gif','png','jpeg','bmp'];
						var typeName = input.files[j].type.split('/');
						var fileType = typeName[1];
						
						if(check_file_type.indexOf(fileType)>0){
							var fileName = input.files[j].name;
							var reader = new FileReader();
							var html = "";
							html += '파일명 : '+ fileName;
							reader.onload = function (e) {
								
								//현재까지 올려진 파일 갯수 체크
								if(i <=10){
									
									var ids = '#images' + i;
									html += '<img id="images'+ i + '" src="#" alt="your image" class = "jRemovePreview" /> '
									html += '<input type="hidden" name ="fileNameList" id ="fileNameList" value ="' + fileName + '"/>';
									html += '<input type="hidden" name ="fileTypeList" id ="fileTypeList" value ="' + fileType + '"/>';
									$(".jGallery").append(html);
									$(ids).attr('src', e.target.result);
									++i;
								}else{
									alert("최대 개수는 10개 입니다.");
									return false;
								}
								
							}
							
						}else{
							alert('이미지 파일만 선택할 수 있습니다.');
							return false;
						}
						reader.readAsDataURL(input.files[j]);
					} 
					
				}else{
					alert('10개 이하만 선택이 가능합니다.')
				}
			}
		}


어떠한 문제점이 있는지 혹시 아시는 분 계신다면, 지적 부탁드립니다.


아... 여기서 console.log를 통해서 알아본 결과 

reader.onload = function (e) 들어가기 전 'fileName'은 각자 달랐습니다.

"하지만" reader.onload = function (e)에 들어가면 'fileName'이 동일해지는 현상이 발생을 하고 있습니다. 그리고 html을 reader.onload = function (e)빼내도 문제는 해결되지 않았습니다.

0
0
  • 답변 7

  • 8k
    2019-01-04 15:55:40
    일단 조보아 때문에 질문글을 잃었어요...
    0
  • 8k
    2019-01-04 15:57:38

    댓글을 달아줄려고 집중해서 읽는데도

    자꾸 질문을 까먹네요.. -_-;;


    이미지 순서 변경되는건 1, 2, 3 이런 이미지 쓰는게 좋아요. 그래야 한눈에 알수있거든요..


    다시 질문글 읽기 도전

    0
  • angularts
    117
    2019-01-04 16:04:31

    파일네임을 읽는 함수에 먼저 전달 하면 동작 할 듯하네요

    function  readImage(file, cb) {
        if (file) {
          var reader = new FileReader();
          reader.onload = function(res) {
            cb(file, res.target.result);
          };
          reader.readAsDataURL(file);
        }
      }


    0
  • 영어가힘든개발자
    172
    2019-01-04 16:09:16

    angularts 님 질문이요. 파일 이름을 읽는것 따로 만들어서 읽게된다면, 값을 올릴때, 파일이름 따로 사진 따로 표시가 된다는 것 아닌가요?

    0
  • 영어가힘든개발자
    172
    2019-01-04 16:10:16

     님 혼란스럽게 해드려서 죄송합니다.

    0
  • angularts
    117
    2019-01-04 16:16:43

    현재 코드에서 보면 fileName이 다음 for문에서 바뀌게 되고 onread의 async동작에서 보호되지 못한다는 뜻입니다.

    onread 콜백함수는 거의 for문 loop가 돌고 있는 중에 호출이 되면서 fileName이 어느 값으로 dom들이 생성될지 모른다는거죠.

    그래서, Closure가 필요한데 간단하게 함수를 호출할때에 fileName을 같이 호출해서 데이터를 분리시켜놓으면, 나중에 async 콜백이 왔을때에 어느 fileName인지 구분할 수 있다는 것입니다. 

    사실 굉장히 간단한 내용인데 말로 설명하려니 괜히 더 복잡해지네요.

    1
  • 영어가힘든개발자
    172
    2019-01-04 16:21:35
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.