input file 按钮美化

最新推荐文章于 2018-03-27 15:13:23 发布

sxs1995

最新推荐文章于 2018-03-27 15:13:23 发布

阅读量585

点赞数 1

分类专栏：项目

本文链接：https://blog.csdn.net/sxs1995/article/details/79388827

版权

项目专栏收录该内容

2 篇文章 1 订阅

订阅专栏

按钮美化

 
  < 
  span 
  class= 
  "upload" 
  > 
 

         
  < 
  input 
  type= 
  "button" 
  class= 
  "upload-btn" 
  value= 
  "上传图片" 
   /> 
 

         
  < 
  span 
  class= 
  "upload-tip" 
  ></ 
  span 
  > 
 

         
  < 
  input 
  type= 
  "file" 
  class= 
  "upload-input-file" 
  name= 
  "photo" 
   /> 
 
 
  </ 
  span 
  > 
 

css：

 
  /*input file 美化*/ 
 
 
  .upload{ 
  position: 
  relative; 
  display: 
  inline-block; 
  height: 
  33px; 
  line-height: 
  33px; 
  overflow: 
  hidden; 
  vertical-align: 
  middle; 
  cursor: 
  pointer;} 
 
 
  .upload .upload-input-file{ 
  width: 
  100%; 
  position: 
  absolute; 
  right: 
  0; 
  top: 
  0; 
  /* font-size:100px;*/ 
  opacity: 
  0; 
  filter: 
  alpha(opacity= 
  0); 
  cursor: 
  pointer;} 
 
 
  .upload .upload-btn{ 
  max-width: 
  150px; 
  overflow: 
  hidden; 
  min-width: 
  100px; 
  outline: 
  none; 
  border: 
  0; 
  height: 
  33px; 
  line-height: 
  33px; 
  color: 
  #fff; 
  background: 
  #19a3fe; 
  cursor: 
  pointer; 
  border-radius: 
  3px;} 
 
 
  .upload .upload-url { 
  -moz-box-sizing: 
  border-box; 
  -webkit-box-sizing: 
  border-box; 
  box-sizing: 
  border-box; 
  border-radius: 
  2px; 
 
 
  border: 
  solid 
  1px 
  #ddd; 
  width: 
  200px; 
  height: 
  30px; 
  -webkit-line-height: 
  1; 
  line-height: 
  30px 
  \9; 
  -ms-line-height: 
  30px; 
  text-indent: 
  3px;} 
 
 
  .upload .upload-tip { 
  cursor: 
  pointer;; 
  overflow: 
  hidden; 
  display: 
  none; 
  background-color: 
  #19a3fe; 
  padding: 
  2px 
  10px; 
  color: 
  #fefefe; 
  font-size: 
  12px 
  !important; 
  border-radius: 
  3px;} 
 

js：

 
  //美化input file 
 
 
  $( 
  ".upload .upload-input-file"). 
  change( 
  function () { 
 
 
  if ( 
  $( 
  this). 
  parent(). 
  html(). 
  indexOf( 
  "class= 
  \" 
  upload-url 
  \" 
  ") != - 
  1) { 
 
 
  var 
  fileUrl = 
  $( 
  this). 
  val(); 
 
 
  $( 
  this). 
  parent(). 
  children( 
  ".upload-url"). 
  val( 
  fileUrl); 
 

   } 
 
 
  else { 
 
 
  var 
  fileUrl = 
  $( 
  this). 
  val(); 
 
 
  var 
  urlArr = 
  fileUrl. 
  split( 
  " 
  \\ 
  "); 
 
 
  var 
  getName = 
  urlArr[ 
  urlArr. 
  length - 
  1]; 
  //截取路径并获取文件的名字 
 
 
  // $(this).parent().children(".upload-tip").text(getName).fadeIn("slow");//在按钮外显示文件名 
 
 
  $( 
  this). 
  parent(). 
  children( 
  ".upload-btn"). 
  val( 
  getName); 
  //按钮上变成文件名称 
 

   } 
 

   }); 
 