펄스나인님 의 [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>
