javascript - manipulate html input type file filename in firefox -

i have html input type file control. when select file big name, shows complete filename in firefox causes bad ui. there solution problem changing name etc?

you can handle way:

1. make html input file control hidden , add onchange event handler change selected file name
2. add readonly html textbox control showing changed file name
3. add html button control onclick event handler trigger file control's click event

demo here

html:

<input type="text" id="txtfile" readonly="true" /> <input type="button" id="btn" value="browse..." onclick="browsefile();" /> <input type="file" id="file1" name="file1" onchange="setfilename(this.value);" /> 

css:

#file1 {     display: none; } 

js:

function browsefile() {     document.getelementbyid('file1').click(); }  function setfilename(filename) {      /* manipulate file name here */     filename = filename.substr(0, filename.lastindexof('.'));     document.getelementbyid('txtfile').value = filename; }