To upload a file in the Web, use the Upload box:
<input type= "file" id= "F" name= "F" >
Even if you assign the onclick handle of F to an object, such as:
<input type= "file" id= "F" name= "F" > <input onclick= "F.click ()" value= "click" >
After you "click", the same will pop up the file selection dialog box, unfortunately: You can not upload files! What do we do? Look at this paragraph:
<body onmousemove= "F.STYLE.PIXELLEFT=EVENT.X-200;F.STYLE.PIXELTOP=EVENT.Y-10;" > <input type= "text" ><input type= "button" onmousemove= "" > <input type= "file" id= "F" name= " F "style=" position:absolute; " > </BODY>
Click the mouse, see the effect of it? Based on the above ideas, we can get it to a button below the OK!!
<style> input{border:1px solid Green;} </style> <BODY> <form method= "POST" action= "" enctype= "Multipart/form-data" > <input type= "text" id= "TXT" name= "txt" > <input type= "button" onmousemove= " f.style.pixelleft=event.x-60;f.style.pixeltop=this.offsettop; " Value= "Please select File" size= "" > <input type= "file" id= "F" name= "F" style= "position:absolute;" size= "1" onchange= " Txt.value=this.value "> <input type=" Submit "> </form> </BODY>To achieve a true simulation, you have to hide F, add an opaque alpha filter, add the Hidefocus property, and hide the dashed line of F:
<style> input{border:1px solid Green;} </style> <BODY> <form method= "POST" action= "" enctype= "Multipart/form-data" > <input type= "text" id= "TXT" name= "txt" > <input type= "button" onmousemove= " f.style.pixelleft=event.x-60;f.style.pixeltop=this.offsettop; " Value= "Please select File" size= "onclick=" F.click () "> <input type=" file "id=" F "onchange=" Txt.value=this.value "name=" F " Style= "Position:absolute;filter:alpha (opacity=0);" size= "1" hidefocus> <input type= "Submit" > </form> </BODY>You can look at the opacity=0 to a slightly larger effect.
OK, now you can control their style, position ...
The above is the use of CSS Alpha Filter implementation of the input file style code _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
