2014年5月28日 星期三
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()" />
訂閱:
張貼留言 (Atom)
沒有留言:
張貼留言