[Salle] 4. 판매하기 페이지 (3) 이미지 첨부파일 여러개 업로드

어제 주소검색 API로 하루를 날리면서 배운 완성 '속도'에 초점을 맞추고 이후 '완성도' 를 신경쓰기로 했다. 오늘 구현할 기능을 리스트업 하고 어떻게 구현할지 Notion에 정리하는 습관은 나중에 실무 들어가서도 유용할 것 같다. 

그래서 판매하기 페이지 1차 구현은 완성되었고, 미흡한 부분은 사이트의 다른 핵심 서비스들 구현이 완료되고 한꺼번에 error handle할 예정입니다.

Today's List

• 판매하기 페이지 1차 구현

• DB 연동 필요

  • 상품이미지 5개 등록 기능 추가

  • Member ID, Email(사용자 Session)을 INSERT문에 삽입

• 카테고리 변수들 label화

• 거래지역 returnUrl POST 오류 해결

---

 

• sell.jsp

  • img - (참고링크)

    • [....]-----오늘 자 업데이트-----

    • 이미지 최대 5개 등록

      • 화면 노출 이미지는 <li>*5로, 받을 주소값은 maxsize:5인 List를 사용한다.

      • <input >의 multiple 속성

      • select_img fuction() → reader.onload는 img나 page 등 파일이나 브라우저가 load 완료되면 실행해주는 event → function(data)으로 attr: 지정한 태그의 src 속성을 저장해주고 reader.readAsDataURL()로 소스(이미지)를 화면에 출력해줌

      • this.files는 input type="file"의 파일들을 받아줌

      • input "file" → 파일첨부 버튼 생성

      • img "src" → 화면에 파일 노출 해주는 플랫폼 역할, 파일소스 입력

      • 구현성공 방식:

        • jQuery append 메서드는 인스턴스 태그 내에 String 변수를 추가해준다. 나는 <div> 태그 안에 <img> 태그를 생성했다. 이미지 소스가 저장되고 화면에도 출력되는 역할이 <img>가 해주기 때문이다.

        • function이 돌때마다 var 변수는 reset 되기 때문에 img_0,1,2... 같이 누적돼야 하는 변수 img_count는 function 밖에 전역변수로 지정했다. Javascript 도 Java 기반이라 알고리즘 풀 때를 떠올려 보니 생각났다.
      • 구글링 해봐도 저와 같은 스펙(Spring Boot, .jsp, JS)으로 하나의 버튼을 사용해서 여러 이미지 파일을 업로드 하게 하는 기능을 구현한 참고자료가 잘 없어서 코드를 올려봅니다. (Javascript 기반으로 jQuery;$()도 사용했습니다)

//.jsp 코드
    <section class="pr_img">
          <p>    
            <label for="img"><h2>상품 이미지</h2></label>
        </p>
        <div id="pr_img">
            <input type="file" id="img" name="pr_img"/>
            
        </div>
    </section>  
 
 
//Javascript 코드
    <script>
    
    var img_count = 0;
        
    //input 파일첨부 버튼 클릭하면 실행되는 change 메서드
    $("#img").change(function fileadd() {
        var reader = new FileReader;
    //이미지 파일 정보와 화면출력을 위해 <img> 태그를 변수로 만듦
        var str = "<img id='img_"+(img_count)+"' src=''/>";
    //파일 경로에 넣기 위해 String으로 변환시켜줌
        var img_count_string = img_count.toString();
        
    //jQuery append 메서드를 사용해 <div id="pr_img"> 안에 <img> 태그 변수를 추가해줌
        $("#pr_img").append(str);
    //<img src=""> 사용자가 업로드한 이미지 파일 경로를 src로 저장해줌(data.target.result) 
        
    //onload는 파일이 업로드 완료된 시점에 function을 발생시키는 메서드
        reader.onload = function(data) {
    //태그 안의 속성을 입력할 수 있는 jQuery attr 메서드를 사용 
            $('#img_' + img_count_string).attr('src', data.target.result).width(150);
        };
        
    //화면에 이미지를 출력해주는 FileReader 객체 인스턴스 reader.readAsDataURL();
    //this.files는 <input type="file">을 통해 업로드한 파일의 정보를 저장하고 있는 배열이다.
    //첨부하기 1회당 file 하나만 업로드해서 <img_0,1,2...>에 각각의 파일들을
    //할당시켜줄 것이기 때문에 files[0]로 index 고정
        reader.readAsDataURL(this.files[0]);
        
            img_count++;
    });
    </script>

 

오늘까지 구현한 판매하기 페이지 화면 CSS가 없어 백지에 가깝다ㅋㅋㅋ

오늘의 아웃풋