各位大虾晚上好，我有个问题想请教你们，我想美化html的file外观，但貌似现在还不能用css直接设计，于是我在网上找了一个方法，就是用‘text’与‘button’组合来代替‘file’，可是在选择文件之后，点‘submit’是，它会自动把‘file’里面的值清空（ps：看这个情况时，可以先将‘file’的display设置成非none），代码如下：
<script language="javaScript">
function FileValue(fileValue,taskId)
{
var task = document.getElementById(taskId);
task.value = fileValue;
document.getElementById("data_file").value=task;
}
</script>
<body>
<input type="text" name="data_form" readonly class="form_text" style="width:300px;"/>
<input type="button" class="form_button" onclick="data_file.click();" value="test"><p>
<input type="file" name="data_file" onchange="FileValue(this.value,'data_form')" style="display:block;"><p>
<input type="submit" value="submit">
</body>
请各位大虾帮帮忙，在线等
<script language="javaScript">
function FileValue(fileValue,taskId)
{
var task = document.getElementById(taskId);
task.value = fileValue;
document.getElementById("data_file").value=task;
}
</script>
<body>
<input type="text" name="data_form" readonly class="form_text" style="width:300px;"/>
<input type="button" class="form_button" onclick="data_file.click();" value="test"><p>
<input type="file" name="data_file" onchange="FileValue(this.value,'data_form')" style="display:block;"><p>
<input type="submit" value="submit">
</body>
请各位大虾帮帮忙，在线等
但是你这个
document.getElementById("data_file") 取到得就是这个file控件。
你实际是想document.getElementById("data_form") .value=data_file.value吧？前面两句你已经做到了啊，这里又何必回过去设置一下呢？再说也设置不了
主要原因是file的css不能设计，所有我就想用‘text’与‘button’来实现类似的功能，而让‘file’的属性设置成“display：none”，可就是不能提交数据
<BODY>
<div id="tt" style="position:relative;">
<input type="button" value="添加附件" onmouseover="floatFile()">
<br>
<div id="div1">
<div id="file1text" ></div><input id="file1" name="myfile" type="file" onchange="showText(this)" style="position:absolute;filter:alpha(opacity=0);width:30px;" >
</div>
</div>
</p>
<input type="text" id="xwidth"/>
<input type="button" onclick="alert($('tt').innerHTML)" value="showHTML">
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
function $(id)
{
return document.getElementById(id);
}
//全局变量，记录文件数；
var fileNum=1;
//mouseover时，把input file移到按扭上，保证点击的是file，
function floatFile()
{
$("file"+fileNum).style.posTop=event.srcElement.offsetTop;
$("file"+fileNum).style.posLeft=event.x-$("file"+fileNum).offsetWidth/2;
}
//选择完一个文件之后，自动创建一个新的div 和 file表单，用于下回使用，hidden刚用过的file
function showText(obj)
{
$(obj.id+"text").innerHTML=obj.value+" <a href='javascript:del("+fileNum+")'>删除</a>";
$("file"+fileNum).style.display='none';
fileNum=fileNum+1;
//直接追加innerHTML(innerHTML+=)会清空原来file中的内容
$("div"+(fileNum-1)).insertAdjacentHTML('AfterEnd','<div id="div'+fileNum+'"><div id="file'+fileNum+'text" ></div><input id="file'+fileNum+'" name="myfile" type="file" onchange="showText(this)" style="position:absolute;filter:alpha(opacity=0);width:30px;" hidefocus></div>');
}
function del(id)
{
$("div"+id).innerHTML="";
$("div"+id).style.display="none";
}</SCRIPT>