Change the style of the file field implementation ideas at the same time compatible with ie firefox

  • 2020-03-26 21:32:31
  • OfStack

<input type=file id="j" onchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" /> 
<input id="ye" style="color: green;border: 1px solid green;width:300px;" /> 
<input type="button" value="File" style="border: 1px solid green;width:80px;" /> 

<script language="javascript"> 
function getValue(){ 
document.getElementById('ye').value = document.getElementById('j').value; 


1, put the stubborn file field is < Input type = file / > Transparency: style = "- moz - opacity: 0; The filter: alpha (opacity = 0); Opacity: 0;"

2. Replace the appearance of the file with a text box and button

3. Put the browse button of the file field above the button we wrote

4, using js to get the value of the file field value changed when the value is: the obtained file path, and assigned to the value of the text box, so ok

I'm just experimenting, it's crude; In fact, it can be further beautified;

This benefit: just simulate the appearance of the file file field, in fact, the file field is still effective, so it is very convenient.

Related articles: