利用javascript使html的file不可手动输入文件路径，只可通过[浏览]按钮选择

原文链接： http://www.cnblogs.com/diony/archive/2011/04/14/2015935.html

<INPUT type=file>，不希望文件路径可以手输入，必须用[浏览]按钮，以下是我的解决方案

< input type = text name = f_file id = f_file size = 60 disabled >

< input type = " button " name = " file_btn " id = " file_btn " onmouseover = " fclick(DATA) " value = " 浏览... " >

< input name = " DATA " type = " file " style = " position:absolute;filter:alpha(opacity=0);width:30px " id = " DATA " onchange = " f_file.value=this.value " hidefocus >

< script language = " JavaScript " >

<!--

function fclick(obj){

var f = document.INPUT_FORM;

os = getoffset(f.file_btn);

with(obj){

style.posTop = os[ 0 ]

style.posLeft = os[ 1 ] - 5

}

}

function getoffset(e){

var t = e.offsetTop;

var l = e.offsetLeft;

while (e = e.offsetParent) {

t += e.offsetTop;

l += e.offsetLeft;

}

var rec = new Array( 1 );

rec[ 0 ] = t;

rec[ 1 ] = l;

return rec

}

// -->

</ script >

实际上是把file变透明了，利用一个text和一个button组合成一个假象上面的代码还有个隐患，就是当form提交之后，转入下一页面时，如果再从下一页面返回次页面，即history.back()时，那个text中保留了最后填入的值，而被透明掉的file是没有保留值的，这样就存在不一致的问题，所以，在form提交的时候，别忘了加上f.f_file.value=""，这样从下一页面返回时，text中也是空白，就一致了。

失败经验：

在网上找到了下面一段代码

<input type="file" name="FILE" style="display:none">

<input type=text name=file_text size=60 disabled>

<input type=button onClick=" FILE .disabled=false;FILE.click();file_text.value=FILE.value; FILE .disabled=true;" value="浏览...">

但是file是disabled在提交之后，servlet是不能取得它的值的，等于白做。但如果不让file变成disabled，那么在按提交按钮的时候，表单不会提交，而是把FILE的内容清空了，很奇怪，具体原因没找到。

转载于:https://www.cnblogs.com/diony/archive/2011/04/14/2015935.html