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 의 여러가지 활용법|작성자 소년하루