[태그:] form

폼을 디자인하면서 input type=file 일때 디자인하는 방법이다. jquery를 사용한다.

예제1)

HTML 코드
<input type=”file” name=”client_file” id=”index_image” placeholder=”이 곳에 이미지 파일을 입력하세요” />
<label for=”index_image”>이 곳에서 이미지 파일을 선택하세요.</label>

CSS 코드
label {
display: inline-block;
width: 5em;
padding: 0 1em;
text-align: right;
}

/* Hide the file input using
opacity /
[type=file] {
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
}
input, [type=file] + label {
border: 1px solid #CCC;
border-radius: 3px;
text-align: left;
padding: 10px;
width: 592px;
margin: 0;
left: 0;
position: relative;
}
[type=file] + label {
text-align: left;
/left: 7.35em;/
top: 0.5em;
/ Decorative */
background: #333;
color: #fff;
border: none;
cursor: pointer;
}
[type=file] + label:hover {
background: #3399ff;
}

jquery 코드
<script>
$(“[type=file]”).on(“change”,function(){
var file = this.files[0].name;
var dflt = $(this).attr(“placeholder”);
if($(this).val()!=””){
$(this).next().text(file);
} else {
$(this).next().text(dflt);
}
});
</script>

예제 파일은 아래를 클릭
http://exam.inmu.net/2020/010.php