개발자를 꿈꾸는 젤리누나

insertBefore() 함수 사용법

1. 부모노드 변수에 담기

2. 부모노드.insertbefore(삽입할 노드, 삽입할 노드의 다음 노드)

tds[0]이 tds[2] 앞으로 이동한 것을 확인할 수 있다!!

console.log()
function handleFileSelect(event) {
    var input = this;
    console.log(input.files)
    if (input.files && input.files.length) {
        var reader = new FileReader();
        this.enabled = false
        reader.onload = (function (e) {
        console.log(e)
            $("#preview").html(['<img class="thumb" src="', e.target.result, '" title="', escape(e.name), '"/>'].join(''))
        });
        reader.readAsDataURL(input.files[0]);
    }
}
$('#file').change(handleFileSelect);
$('.file-edit-icon').on('click', '.preview-de', function () {
    $("#preview").empty()
    $("#file").val("");
});
$('.preview-edit').click( function() {
  $("#file").click();
} );

<div class="file-wrapper flie-wrapper-area">
  <div class="float-left">
    <span class="label-plus"><i class="fas fa-plus"></i></span>
    <input type="file" name="file" id="file" class="upload-box upload-plus" accept="image/*">
    <div id="preview"></div>
    <div class="file-edit-icon">
      <a href="#" class="preview-edit">수정</a>
      <a href="#" class="preview-de">삭제</a>
    </div>
  </div>
</div>

.thumb {
    width: 100px;
    height: 100px;
    margin: 0.2em -0.7em 0 0;
}
.remove_img_preview {
    position:relative;
    top:-25px;
    right:5px;
    background:black;
    color:white;
    border-radius:50px;
    font-size:0.9em;
    padding: 0 0.3em 0;
    text-align:center;
    cursor:pointer;
}

http://yoonbumtae.com/?p=3304 

https://guiyomi.tistory.com/119

https://designcck.tistory.com/43

input 태그에 change 이벤트가 발생했을 시에 select option 태그가 가능하도록 스크립트문을 짰는데..

입력 태그 전에 스크립트문을 넣었더니 작동이 안됐다..

실행 순서를 생각하고 스크립트문 위치를 지정하자.

보통은 footer 태그 밑에 한꺼번에 모아서 작성을 많이 한다고는 하더라!