用‘button’和‘text’组合代替‘file’，选择文件后点‘submit’，‘file’的值被清空了
日期：2014-05-19 浏览次数：20727 次
用‘button’跟‘text’组合代替‘file’，选择文件后点‘submit’，‘file’的值被清空了
各位大虾晚上好，我有个问题想请教你们，我想美化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>
请各位大虾帮帮忙，在线等。。。
------解决方案--------------------
参考这个，自己改改<input type="button" value="添加附件" onmouseover="floatFile()">的样式就可以使用
<HTML>
<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>
各位大虾晚上好，我有个问题想请教你们，我想美化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>
请各位大虾帮帮忙，在线等。。。
------解决方案--------------------
参考这个，自己改改<input type="button" value="添加附件" onmouseover="floatFile()">的样式就可以使用
<HTML>
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
