파일업로드 디자인

간단한 게시판 기능중에 파일업로드 기능이 결합된 글쓰기 페이지 구현중에 먼저 view 페이지 작업을 시작

<input type="file" id="myFileUp"> input type file은 디자인이 너무 안이쁘다 예를 들면 이렇게

이미지의 html 코드는 대충 이렇다.

  <form id="form1" runat="server">

        <input type='file' id="myFileUp" />

        <img id="target" src="#" alt="your image" />

  </form>

코북에 맞는 디자인으로 커스텀 해본다

● 부트스트랩으로 뷰를 작업하고 있기 때문에 파일선택은 부트스트랩 버튼과 같은 느낌으로 

● 선택된 파일명은 form에 들어오고 

● 이미지 파일이 들어올 지정된 영역안으로 선택된 파일이미지가 들어온다

---

HTML

<!-- 파일등록 -->

<div class="form-group" style="margin: 8px 0 8px;">

<input id="fileName" class="form-control" value="파일선택" disabled="disabled" style="width:85%; display: inline;">

<div class="fileRegiBtn">

<label for="myFileUp">파일등록하기</label>

<input type="file" id="myFileUp">

</div>

</div>

<!-- 커버이미지 들어오는 부분 (임시로 이미지를 넣어줬다)-->

<div class="selectCover" style="padding-left: 0;">

  <img id="cover" src="/cobook/resources/img/defaultImg.jpg" style="width: 182px; height: 268px;"/>

 </div>

파일선택인 부분은 파일을 선택했을 때 파일명이 들어오는 부분이기에 disabled로 막아둔다.

CSS

/*라벨은 원하는대로 커스텀하고*/

.fileRegiBtn label {

display: inline-block; 

padding: .5em .75em; 

color: #ffffff; 

font-size: inherit; 

line-height: normal; 

vertical-align: middle; 

background-color: #FC7D01; 

cursor: pointer; 

border: 1px solid #ebebeb; 

border-bottom-color: #e2e2e2; 

border-radius: .25em;

}

/*파일선택시 선택된 파일명이 붙는것을 가려준다*/

.fileRegiBtn input[type="file"]{

position: absolute; 

width: 1px; 

height: 1px; 

padding: 0; 

margin: -1px; 

overflow: hidden; 

clip:rect(0,0,0,0); 

border: 0;

}

파일이미지 선택시 이미지 파일을 읽어서 지정된 영역으로 뿌려주는 자바스크립트

JAVASCRIPT

function readURL(input) {

    console.log("버튼클릭함1");

       if (input.files && input.files[0]) {

       var reader = new FileReader();

       reader.onload = function (e) {

               $('#cover').attr('src', e.target.result);        //cover src로 붙여지고

               $('#fileName').val(input.files[0].name);    //파일선택 form으로 파일명이 들어온다

           }

         reader.readAsDataURL(input.files[0]);

       }

   }

   

$("#myFileUp").change(function(){

       readURL(this);

       console.log("이미지 바뀜?");

   });

---

이제 저장하는 다음단계로 들어가야지

참고출처

http://jsfiddle.net/Fractaliste/LvsYc/1669/

http://webdir.tistory.com/435