Extracting a Value From a String

[Jason_Beaudoin]

I am attempting to extract the value that is given from the "browse file" form element in HTML.

For example, when you use the "Browse File" form element, you get a string that contains the complete path where the file is located:

E:\Internet\webs\images\defaultpic.jpg

I would like to extract simply the file name, like such:

defaultpic.jpg

...and then have that value displayed in the "Browse File" form element's value.

Can this be done? If so, can someone show me how? I'm not that proficient in Java Script.

Thank you in advance.

[Mr J]

Please try the following example



<script>
function test(){
string=document.f1.t1.value

display=string.substring(string.length,string.lastIndexOf("/")+1 )
document.f1.t1.value=display.toUpperCase()


document.getElementById("mydiv").innerHTML="You have entered<P>"+string.toUpperCase()+"<P>And are displaying <P>"+display.toUpperCase()

}
</script>
<center>
Enter a sample path
<P><form name="f1">
<input type="text" name="t1" value="folder1/folder2/mypage.htm" size="50">
<P><input type="button" Value="Test" onclick="test()">
</form>

<div id="mydiv">&nbsp;</div>
</center>

[Jason_Beaudoin]

Yep... that's what I'm looking for.

Thank you!

[Jason_Beaudoin]

ok...now I'm having trouble getting it to work with the "Browse File" form element.

Any ideas?

[Roy Sinclair]

For security reasons you cannot alter the value of the <input type="file"> tag. Many things you can do with other input types are not allowed because they could be used to bypass the user or confuse them.

[Jason_Beaudoin]

AAAHHH... I see.

Ok.. no worries.

[Mr J]

Please try the following for a possible work round


<script>
function upload(){
string=document.f1.t1.value

display=string.substring(string.length,string.lastIndexOf("\\")+1 )
document.f1.t1.value=display

document.getElementById("mydiv").innerHTML="You have entered<P>"+string+"<P>And are displaying <P>"+display

}

</script>
<center>

<P><form name="f1">
<input name="my_upload" type="file" style="display:none" onchange="t1.value=this.value">
<input type="text" name="t1" value="">
<input type="button" value="Browse" onclick="my_upload.click()">
<input type="button" value="Apply" onclick="upload()">
</form>

<div id="mydiv">&nbsp;</div>
</center>

[Mr J]

hmm..............



Just tried it in Mozilla and found that the method used to click another button onclick="my_upload.click()" doesn't work in Moz.




The click() method will work on buttons but not the file input


hmm..............