有关input的file 控制及清理

在1些网站开展提交时,当点击了“访问”按钮以后会弹出【挑选文档】的会话框。要想完成这1作用,用input的file控制来完成就好啦~

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.   <meta charset="UTF⑻">    
  5.   <title>Document</title>    
  6.   <style></style>    
  7. </head>    
  8. <body>    
  9.   <input type="file" value="挑选文档" />    
  10. </body>    
  11. </html>    

实际效果图是酱婶的:

留意!别认为这个是由1个text和1个button组成成的,实际上它便是1个file控制哦

今日工作中中遇到规定:无法显示“未挑选任何文档”,捣鼓够1个小时,发现设定它的width值就搞定了:

编码: <input type="file" value="挑选文档" />

width值设定为70px不久好,以下图:

【清理】

思路:

外面的1层div是以便给里边的input出示部位参照,由于写款式的情况下必须相对性精准定位,使真实的file控制遮盖在仿真模拟的上面,随后掩藏掉file控制(即便file控制不能见)

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF⑻">  
  5.   <title>Document</title>  
  6.   <style>  
  7.     .file-box{ position:relative;width:340px}    
  8.     .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}    
  9.     .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}    
  10.     .file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }    
  11.   </style>  
  12. </head>  
  13. <body>  
  14.     <br><br>  
  15.     <div class="file-box">    
  16.         <form action="" method="post" enctype="multipart/form-data">    
  17.         <input type='text' name='textfield' id='textfield' class='txt' />    
  18.         <input type='button' class='btn' value='访问' />    
  19.         <input type="file" name="fileField" class="file" id="fileField" size="28"/>    
  20.     </form>    
  21.     </div>    
  22. </body>  
  23. </html>  

实际效果:

以上这篇有关input的file 控制及清理便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。