송해신사
102
2018-10-11 22:18:01
5
106

스크립트 append() 질문입니다.


파일첨부기능이 있는 form을 추가버튼 클릭시 from을 복사하여 뿌려주는 식으로

다중 파일업로드를 구현중입니다.


여기서 form자체를 복사하다보니 file name이 같아서 한개만 첨부되는 문제점이 발생하였습니다.


복사를 하면서 name을 변경 할 수 있나요?


이게 복사하는 div form이고

<div class="form-group">
	<input type="hidden"name="YN" id="YN" value="N">
	<label for="" class="control-label col-md-2 col-sm-2 col-xs-12 num">보기 <span> ${status.count}</span></label>
	<div class="col-md-10 col-sm-10 col-xs-12">
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div class="input-group">
				<label class="input-group-addon" for="">유형</label>
				<select class="form-control subjectgu2" name="subjectgu2" id="subjectgu2">
					<option value="T" <c:if test="${result.subjectgu2 eq 'T'}"> checked </c:if>>텍스트</option>
					<option value="I" <c:if test="${result.subjectgu2 eq 'I'}"> checked </c:if>>이미지</option>
				</select>
				<label class="input-group-addon" for="exam_answeryn"><input type="checkbox" name="answeryn" id="answeryn" value="Y" <c:if test="${result.answeryn eq 'Y'}"> checked </c:if>/> 정답</label>
				
			</div>
		</div>
		<div class="col-md-8 col-sm-8 col-xs-12">
			<div class="input-group">
				<label class="input-group-addon" for="mccnt1">내용</label>
				<input type="text" class="form-control" name="subject2" id="subject2" placeholder="문제 내용을 입력하세요." required maxlength="50" value="${result.subject2}"/>
				<input type="file" class="form-control form-control-file hidden" name="exam_file" id="filenm2" value="${result.filenm2}"/>
				<div class="input-group-btn"></div>
			</div>
		</div>
	</div>
</div>


이게 자바스크립트 폼 복사하는 부분입니다.


$(document).on('click','.add_exam',function(evt){
	evt.preventDefault();
	var $target = $('.exam_wrap');
	var $value = $target.children('div.form-group:first');
	var $value_len = $target.find('div.form-group').length + 1;
	var $value_cl = $value.clone();
	
		$value_cl.find('input[type=text]').removeClass('hidden');
		$value_cl.find('input[type=file]').addClass('hidden');
		$value_cl.find('input[type=file]').attr('required',false);
		$value_cl.find('input[type=text]').attr('required',true);
		$value_cl.find('input[type=checkbox]').attr('checked', false);
		$value_cl.find('.num span').text($value_len);
		$value_cl.find('.input-group-btn').append(
			$('<a/>',{
				'class':'remove_exam btn btn-danger',
				href:'#',
				text:'삭제'
			})
		);
		$value_cl.find('input').val('');
	$target.append($value_cl);
	check();
}).on('click','.remove_exam',function(evt){
	evt.preventDefault();
	var $target = $(this).parents('div.form-group');
		$target.remove();
	$('.exam_wrap .num').each(function (index, item) {
		$(item).find('span').text(index + 1);
	});
});


복사하는 부분에서 name값을 변경해줄수 있는 방법 부탁드립니다.

0
0
  • 답변 5

  • antop
    749
    2018-10-11 23:39:55

    이해를 잘 못하겠어서 그런데..

    <form> 안의 어떤 여러개의 input 세트를 통째로 추가/삭제 하려고 하는거죠?


    <form>
      <!-- 요까지 한 세트가 복사됨 -->
      <div class="group>
        <input type="text" name="subjectgu2">
        <input type="text" name="subject">
        <input type="file" name="exam_file">
      </div>
      <!--// 요까지 -->
      <div class="group>
        <input type="text" name="subjectgu2">
        <input type="text" name="subject">
        <input type="file" name="exam_file">
      </div>
      <div class="group>
        <input type="text" name="subjectgu2">
        <input type="text" name="subject">
        <input type="file" name="exam_file">
      </div>
    </form>


    이렇게 짝이 딱딱 맞아 떨어지는 경우라면

    input 의 name을 같은 값으로 사용하고 받는 쪽에서 배열로 받으면 됩니다.

    <input type="file"> 만 추가 되는 거라면 마찬가지로 받는 쪽에서 file에 해당하는 부분만 배열로 받으면 됩니다.

    0
  • 잡채밥냠냠
    127
    2018-10-12 00:03:23

    multipart로 보내고 받으면 간단해요~

    0
  • 송해신사
    102
    2018-10-12 09:28:43

    <input type="file" name="exam_file">

    <input type="file" name="exam_file">

    <input type="file" name="exam_file">

    이렇게 파일 name값이 똑같으면 컨트롤러  MultipartHttpServletRequest mRequest 여기에 하나밖에 안담겨서 오던데요ㅜㅜ



    0
  • NEWBIEㅋ
    137
    2018-10-12 11:26:10

    multipart 고고!

    0
  • 잡채밥냠냠
    127
    2018-10-12 21:24:04 작성 2018-10-12 21:30:22 수정됨

    멀티파트리퀘스트는 님이 지정한 exam_file이라는 네임으로 배열 형태로 들어옵니다.  그걸 겟~("exam_file") 메소드를 이용해서 까보면 파일들이 있어요. 그걸 포문 돌리면 쉽게 찾을 수 있을겁니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.