今天需要找一个和页面比较搭的上传文件的样式,但是很可惜没有找到比较合适的,于是只能自己写一个简单的。
为了偷懒用了bootstrap自带的样式
代码如下:
<form action="#" method="post" enctype="multipart/form-data">
<input class="btn btn-xlarge btn-clean-one" id="pictureFile" type="file" onchange="setSpanCon()" name="pictureFile" style="opacity: 0">
<span class="btn btn-xlarge btn-clean-one" id="showFilename" onclick="setFilename()">选择文件</span>
<script type="text/javascript">
function setFilename(){
var pictureFile = document.getElementById("pictureFile");
pictureFile.click();
}
function setSpanCon(){
var pictureFile = document.getElementById("pictureFile");
var FullFilename = pictureFile.value;
var aFilename = FullFilename.split('\\');
var filename = aFilename[aFilename.length-1];
var spanFilename = document.getElementById("showFilename");
spanFilename.innerHTML = filename;
}
</script>
<input class="btn btn-xlarge btn-clean-one" type="submit" value="提交"/>
</form>
结果如下: