tes*_*uru 29
按照以下步骤操作,您可以为文件上载表单创建自定义样式:
1.)这是简单的HTML表单(请阅读我在这里写的HTML评论)
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
<!-- this is your file input tag, so i hide it!-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<input type="submit" value='submit' >
</form>
2.)然后使用这个简单的脚本将click事件传递给文件输入标记.
function getFile(){
document.getElementById("upfile").click();
}
现在,您可以使用任何类型的样式,而无需担心如何更改默认样式.我非常了解这一点,因为我一直试图改变一个半月的默认样式.相信我这很难,因为不同的浏览器有不同的上传输入标签.所以使用这个来构建自定义文件上传表单.这是完整的AUTOMATED UPLOAD代码.
<html>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
小智 8
通过Jquery的相同解决方案.如果页面中有多个文件输入,则可以正常工作.
$j(".filebutton").click(function() {
var input = $j(this).next().find('input');
input.click();
});
$j(".fileinput").change(function(){
var file = $j(this).val();
var fileName = file.split("\\");
var pai =$j(this).parent().parent().prev();
pai.html(fileName[fileName.length-1]);
event.preventDefault();
});
小智 1
使用 Clip 属性以及不透明度、z-index、绝对定位和一些浏览器过滤器将文件输入放置在所需的按钮上：
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
| 归档时间： |
|
| 查看次数： |
185436 次 |
| 最近记录： |