So that the html file using javascript not manually enter the file path, only by [Browse] button to select

Original link: http://www.cnblogs.com/diony/archive/2011/04/14/2015935.html

<INPUT type = file>, does not want to hand the file path can be input, you must use [Browse] button, the following is my solution

< 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 >

The file actually become transparent, and using a combination of text and a button code above into an illusion there is a risk, when the form is submitted, when transferred to the next page, if the secondary page back from the next page, that is history.back (), the text retains the value of the last filled, and was out of the file is not transparent retention value, so that there is inconsistency, therefore, at the time of submission of the form, do not forget to add on f.f_file.value = "" , so when the next page is returned from, text is also blank, it is in agreement.

 

Failure experience :

The Internet to find the following piece of code

<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="浏览...">

But the file is disabled after submission, servlet can not get its value is equal to waste. But if not to file becomes disabled, then when you press the submit button, the form is not submitted, but the contents of FILE empty, and very strange, did not find the specific reasons.

Reproduced in: https: //www.cnblogs.com/diony/archive/2011/04/14/2015935.html