input type file 꾸미기
input type file 꾸미기
# 1. 이미지로 대체하자.
<script>
// 파일찾기
function fncProductFile()
{
document.Form.txtProductFile.click();
document.Form.txtProductFileName.value=document.Form.txtProductFile.value;
}
</script>
<form name='Form'>
<input type='file' name='txtProductFile' size="15"style='display:none'>
또는
<input type='file' name='txtProductFile' size="15"style='cursor:hand;width:5px;filter:alpha(opacity=0);position:absolute;top:10px;left:40px'>
<input type="Text" style="width:150px;" name="txtProductFileName" class='input' readOnly>
<img style='cursor:hand' alt="파일찾기" src="./images/btn/btn_search_s.gif" align="absMiddle" border="0" onclick="fncProductFile()">
</form>
# 2. value값을 초기화하자
file 타입의 input태그는 readOnly 속성이기 때문에 value 속성에 사용자가 임으로 값을 넣을수가 없습니다. 때문에 초기화하고자 할경우 document.file.value = "";처럼 사용하실수가 없겠죠.
이럴때 유용한 방법이 되겠네요...
<form>
<input type="text" name="txtName"><br>
<input type="file" name="upload"><br>
<input type="file" name="upload"><br>
<input type="button" value=삭제 onclick="fileReset(this.form);">
<input type="button" value=확인 onclick="alert(this.form.upload.value);">
</form>
<script language="JavaScript">
<!--
function fileReset( form )
{
//form.upload.select(); //upload라는 name을 가진 컨트롤 모두 선택됨.
//upload이름을 가진 컨트롤이 많은경우 그중에 하나만 초기화...
var files = document.getElementsByName("upload");
files[0].select(); // 첫번째 선택
//선택된 컨트롤의 값 모두 삭제
document.selection.clear;
// or document.execCommand('Delete');
// 단, 같은 메서드안에서 위코드 이후에 form.submit()사용시 "액세스 거부"에러 발생.
// 참고로 form안에 있는 모든 컨트롤의 값을 초기화할때
// form.reset 대신에 document.selection.empty;를 사용해도 같은효과가 나네요.
}
//-->
</script>
# 3. 업로드전에 파일 사이즈 구하기
<form>
<input type="file" onChange="getFileSize(this);">
<img name="tempFile" id="tempFile" width="0" height="0" dynsrc=''>
<br>
<span id="sizeReport" style="color:red"></span> Bytes
<script language=javascript>
function getFileSize( obj)
{
// var fileObj = document.getElementById("tempFile");
// fileObj.dynsrc.value = obj.value;
var img = new Image();
img.dynsrc = obj.value;
document.getElementById("sizeReport").innerText = fileObj.fileSize;
}
</script>
</form>
# 4. 이미지 업로드시 미리보기
<script language=javascript>
<!--
function SignChange(form)
{
var defaultSign = "../images/sample.gif"; //기본이미지
if(form.SignSearch.value != '')
form.SignImage.src = form.SignSearch.value;
else
form.SignImage.src = defaultSign;
}
//-->
</script>
<IMG height="50" src="../images/sample.gif" width="50" id="SignImage"><br>
<input class="base" id="SignSearch" type="file" size="20" name="SignSearch"
onpropertychange="FileButtonOnClick(this.form)">
[출처] [JS] input type=file 의 여러가지 활용법|작성자 소년하루