펄스나인님 의 [HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기팁으로

펄스나인님 의 [HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기팁으로

QA

펄스나인님 의 [HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기팁으로

본문

펄스나인님 의 ([HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기) 팁으로 

무한 생성하기 만들엇는데 글쓰기 페이지에서 이미지가 바로 보이지 않습니다.

상세보기 페이지에서는정상적올 출력 되고있습니다.

https://sir.kr/g5_tip/12466

 

<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>

이 질문에 댓글 쓰기 :

답변 1

애초에 제가 제이쿼리 자체를 사용하지 않는 사람이라... 순수 바닐라로 예제만 짜 봅니다.

input 는 3개인데 무한 생성이 가능합니다.

여러개 생성시는 루프문으로 돌려서 생성해도 됩니다.

input 의 id 나 name 은 본인이 원하는 걸로 주세요.

 


<script> 
function imgCall(img, call) {
    reader = new FileReader;
    reader.onload = function () { 
        img.src = reader.result;
    } 
    reader.readAsDataURL(call.files[0]); 
}
</script>
<input type=file accept=image/* onchange=imgCall(image_1,this)>
<img id=image_1 style=width:120px><br>
<input type=file accept=image/* onchange=imgCall(image_2,this)>
<img id=image_2 style=width:120px><br>
<input type=file accept=image/* onchange=imgCall(image_3,this)>
<img id=image_3 style=width:120px>

 

에를 들어 10개를 루프문으로 돌린다면 아래처럼 되겠죠.

 


<script> 
function imgCall(img, call) {
    reader = new FileReader;
    reader.onload = function () { 
        img.src = reader.result;
    } 
    reader.readAsDataURL(call.files[0]); 
}
limitInput = 10;
for (i = 1; i <= limitInput; i++) document.write("<input type=file accept=image/* onchange=imgCall(image_" + i + ",this)><img id=image_" + i + " style=width:120px>" + (i == limitInput ? "" : "<br>"));
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 2,663
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT