펄스나인님 의 [HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기팁으로
본문
펄스나인님 의 ([HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기) 팁으로
무한 생성하기 만들엇는데 글쓰기 페이지에서 이미지가 바로 보이지 않습니다.
상세보기 페이지에서는정상적올 출력 되고있습니다.
<script>
var body="";
function insert_form(){
n = $("#add_box").val();
next_num = Number(n) + 1;
real_num = Number(next_num) - 1;
$("#add_box").val(next_num);
var sel_file;
$(document).ready(function() {
$("#reg_mb_img").on("change", handleImgFileSelect);
});
function handleImgFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
alert("이미지 파일만 첨부해주세요.");
return;
}
sel_file = f;
var reader = new FileReader();
reader.onload = function(e) {
$("#img").attr("src", e.target.result);
}
reader.readAsDataURL(f);
});
}
body = "<div id='table_"+real_num+"'>";
body += "<table cellpadding='0' cellspacing='0' width='100%' style='border-bottom:1px solid #dcdcdc;'>";
body += "<input type='hidden' name='img_url[]' id='img_url_"+real_num+"'>";
body += "<tr>";
/*
body += " <td height='162' valign='top' width='138' >";
body += " <div class='buy_img_div''><span style='display:inline-block; margin-top:30px;'>이미지등록시에만<br>상세 검수가<br>진행됩니다</span></div>";
body += " <div class='upload_img_btn' onclick='regist_img("+real_num+")'>이미지등록</div>";
body += " </td>";
*/
body += " <td height='162' valign='top' width='138' >";
body += " <div class='img_wrap'>";
body += " <img id='img["+real_num+"]'/>";
body += " </div>";
body += " <div style='width:120px; height: 24px;margin-top:5px;'>";
//body += " <input type='file' id='reg_mb_img["+real_num+"]' style='width:120px;'>";
body += " <label class='control-label sp-label'><input type='file' name='bf_file[]' id='reg_mb_img["+real_num+"]' style='width:120px;'></label>";
body += " </div>";
body += " </td>";
/*
<!-- 이미지 출력 -->
body += " <td height='162' valign='top' width='138' >";
body += " <div class='form-group' style='margin-bottom:0;'>";
body += " <div class='col-sm-10' style='margin-top: 15px;'>";
body += " <table id='variableFiles'></table>";
body += " </div>";
body += " </div>";
body += " </td>";
<!-- 이미지 출력 -->
*/
body += " <td valign='top'>";
body += " <table cellpadding='0' cellspacing='0' width='100%' class='buy_option_tb'>";
body += " <tr>";
body += " <th>영문상품명</th>";
body += " <th>브랜드</th>";
body += " <th>옵션/색상</th>";
body += " <th>사이즈</th>";
body += " <th>수량</th>";
body += " <th>단가(CNY)</th>";
body += " </tr>";
body += " <tr>";
body += " <td><input type='text' name='wr_body_11[]' class='wr_body_11 required' value='' required placeholder='(필수) 영문 상품명을 입력해주세요'/></td>";
body += " <td><input type='text' name='wr_body_12[]' class='wr_body_12' value='' placeholder='예) GAP'/></td>";
body += " <td><input type='text' name='wr_body_13[]' class='wr_body_13' value='' placeholder='예) red'/></td>";
body += " <td><input type='text' name='wr_body_14[]' class='wr_body_14' value='' placeholder='예) small'/></td>";
body += " <td><input type='text' name='wr_body_15[]' class='wr_body_15 required' value='' required placeholder='예) 1'/></td>";
body += " <td><input type='text' name='wr_body_16[]' class='wr_body_16 required' value='' required placeholder='예) 400'/></td>";
body += " </td>";
body += " <tr>";
body += " <td colspan='6'><input type='text' name='wr_body_17[]' class='wr_body_17 required' required value='' placeholder='(필수) 상품 url을 입려해주세요'/></td>";
body += " </td>";
body += " <tr>";
body += " <td colspan='6'><textarea name='wr_body_18[]' class='wr_body_18' placeholder='메모(250자 이내)'></textarea></td>";
body += " </tr>";
body += " <tr>";
body += " <td height='51' colspan='6'>";
body += " <div style='position;relative; width:100%; height:100%;'>";
body += " <div class='copy_div' onclick='copy_form("+real_num+")'>+ 복사</div>";
body += " <div class='remove_div' onclick='remove_form("+real_num+")'>- 삭제</div>";
body += " <div class='count_div'>"+next_num+"</div>";
body += " </div>";
body += " </td>";
body += " </tr>";
body += " </table>";
body += " </td>";
body += "</tr>";
body += "</table>";
body += "</div>";
body += "<div id='form_"+next_num+"'></div>";
/* body += "<div id='img_form_"+real_num+"' class='img_form_box'>";
body += "<div class='img_form_tb'><table class='img_tb' cellpadding='0'><tr><th><span><input type='file' id='reg_mb_img'></span>";
body += "<div class='close_img_box' onclick='regist_img_close("+real_num+")'>X</div></th><tr>";
body += "<td><input type='radio' name='img_type_"+real_num+"' value='file1' onclick='div_OnOff(this.value);' checked> 파일첨부 ";
body += " <input type='radio' name='img_type_"+real_num+"' value='link' onclick='div_OnOff(this.value);'> 이미지 링크 등록 ";
body += "</td></tr>";
body += "<tr class='save_file_tr'><td style='border-bottom:1px solid #dcdcdc;'>";
//body += "<iframe src='./buy_write.php?action=upload_file&num="+real_num+"' width='100%' height='25' scrolling='0' frameborder='0'></iframe></td></tr>";
body += "<tr class='save_file_tr'><td> 500KB이하</td></tr>";
body += "<tr class='save_link_tr'><td style='border-bottom:1px solid #dcdcdc;'><input type='text' id='myfile_txt_"+real_num+"' class='myfile_txt' > </td></tr>";
body += "<tr class='save_link_tr'><td></td></tr>";
body += "<tr><td align='center'><input type='button' value='저장하기' class='save_img' onclick='save_img_info("+real_num+")' />";
body += "<input type='button' value='닫기' onclick='regist_img_close("+real_num+")' class='close_img'/></td></tr></table></div>";
body += "</div>";
*/
$("#form_"+n).html(body);
}
function div_OnOff(v){
if(v=='file'){
$(".save_link_tr").hide();
$(".save_file_tr").show();
}else{
$(".save_file_tr").hide();
$(".save_link_tr").show();
}
}
insert_form();
function remove_form(n){
$("#table_"+n).html("");
}
function copy_form(now){
real_num = $("#add_box").val();
insert_form();
bf_wr_body_11 = $("#table_"+now+" .wr_body_11").attr("value");
$("#form_"+real_num+" .wr_body_11").val(bf_wr_body_11);
bf_wr_body_12 = $("#table_"+now+" .wr_body_12").attr("value");
$("#form_"+real_num+" .wr_body_12").val(bf_wr_body_12);
bf_wr_body_13 = $("#table_"+now+" .wr_body_13").attr("value");
$("#form_"+real_num+" .wr_body_13").val(bf_wr_body_13);
bf_wr_body_14 = $("#table_"+now+" .wr_body_14").attr("value");
$("#form_"+real_num+" .wr_body_14").val(bf_wr_body_14);
bf_wr_body_15 = $("#table_"+now+" .wr_body_15").attr("value");
$("#form_"+real_num+" .wr_body_15").val(bf_wr_body_15);
bf_wr_body_16 = $("#table_"+now+" .wr_body_16").attr("value");
$("#form_"+real_num+" .wr_body_16").val(bf_wr_body_16);
bf_wr_body_17 = $("#table_"+now+" .wr_body_17").attr("value");
$("#form_"+real_num+" .wr_body_17").val(bf_wr_body_17);
bf_wr_body_18 = $("#table_"+now+" .wr_body_18").attr("value");
$("#form_"+real_num+" .wr_body_18").val(bf_wr_body_18);
}
</script>
답변 2
답글 없어서 한번 봐드렸는데 무한생성이 뭔가요? (이것도 최대한 구체적으로 쓰셔야되요..)
그리고 스크립트.. 다시 기초부터 배우시길 권유드려요..
제이쿼리 저렇게 쓰시면 안되요
함수에다가 도큐먼트 레이디 넣고.. 짚어줄게 너무 많아요... 한두가지면 모를까.. 너무 길어서....
같은 질문 네번째인데, 가능하면 코드를 보기쉽게 code로 감싸달라고 답변을 했는데,
그냥 복붙으로.. 아마 이것도 같은 운명이 될 것 같습니다.
위 링크로 부족하신가요?
질문 코드는 insert_form 함수안에 매개변수가 정의되어 있고 그 매개변수를 루프문으로 돌리는 코드가 있어야만 무한 생성이 가능합니다.
현재 이 상태로는 2개 생성도 불가능합니다.
그래서 함수를 하나 만들고 for문으로 반복시키는 기본코드를 짜 드렸습니다만...
테이블안의 내용물까지 딱 만족시키는 완전 떠먹여주는 맞춤형을 원하신다면 제작의뢰를 하시는 걸 권해드립니다.
