改變造型

http://vvn888888.pixnet.net/blog

A.客製化附圖 submit按鈕
<input type="image" src="images\upload_2.png" alt="Submit Form" />


B.客製化附圖 file(upload)按鈕
(image size:168x33)
CSS:
 .choose_file{
    position:relative;
    display:inline-block;    
 /*border-radius:8px;*/
    border:#ebebeb solid 1px;
    width:168px; 
    height:33px;
    /*padding: 4px 6px 4px 8px;*/
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    /*margin-top: 2px;*/
    background-image: url(images/select.png);
  /* background:'url(images\select.png)'; */
}
.choose_file input[type="file"]{
    -webkit-appearance:none; 
    position:absolute;
    top:0; left:0;
    opacity:0; 

}

HTML:
      <div class="choose_file">
        <!-- <span>Choose File</span> -->
        <input name="Select File" type="file" />

    </div>

A,B的整合 Upload檔案(php):
<form action="custom\upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file2">Filename:</label>

<div class="choose_file">
  <input type="file" name="file" id="file"/>
</div>  
<input type="image" src="images\upload_2.png"  name="submit" value="Submit" alt="Submit Form" />


</form>  




C.得到file upload的名字:
JS:
   function alertFilename()
            {
                var thefile = document.getElementById('file');
                alert(thefile.value);

            }
HTML:
 <input type="file" name="file" id="file" onchange="alertFilename()" />