具体解决步骤如下:
1、书写html文件的body部分如下:
<form id="form1" runat="Server" enctype="multipart/form-data">
<div id="filebox"><input type="file" id="choosefile" /></div>
<input type="button" ondblclick="chooseFile()" value="双击选择文件" />
<input type="button" onClick="getFilePath()" value="上传" />
</form>
2、书写html文件的javascript部分如下:
<script language="JavaScript">
function chooseFile(){
document.getElementById("choosefile").click();
}
function getFilePath(){
var path = document.getElementById("choosefile").value;
alert(path);
}
</script>
3.、书写html文件的css部分如下:
<style type="text/css">
#filebox{
float:left;
width:155px;
overflow:hidden;
}
</style>
到此制作完毕,最后总结解决思路:将file组建放在div中,设置div宽度略大于file插件的文本框部分,目的在于让div将file插件的按钮部分遮盖起来,然后在div后面制作一个按钮,将按钮上的文字改成需要的文字,再在按钮上写上事件函数,用于触发file组建的click事件,以打开文件选择窗口。这样简单的文件上传效果模拟完毕~~