javascript实现input file上传图片预览效果

本文实例介绍了javascript实现input file上传图片预览效果的详细代码，分享给大家供大家参考，具体内容如下

运行效果图：

具体实现代码:

 
 
 

 
  .imgbox,.imgbox1
  {
   float: left;
   margin-right: 20px;
   margin-top: 20px;
   position: relative;
   width: 182px;
   height: 142px;
   border: 1px solid red;
   overflow: hidden;
  }
  .imgbox1{border: 1px solid blue;
  }


  .imgnum{
   left: 0px;
   top: 0px;
   margin: 0px;
   padding: 0px;
  }
  .imgnum input,.imgnum1 input {
   position: absolute;
   width: 182px;
   height: 142px;
   opacity: 0;
  }
  .imgnum img,.imgnum1 img {
   width: 100%;
   height: 100%;
  }
  .close,
  .close1 {
   color: red;
   position: absolute;
   left: 170px;
   top: 0px;
   display: none;
  }





 





 
  
  X
  
  
 

 
  
  X
  
  
 


 
  
  X
  
  
 


 
  
  X
  
  
 


 
  
  X
  
  
 


 
  
  X
  
  
 


 
  
  X
  
  
 


 
  
  X
  
  
 
 
 
  
  X
  
  
 





 
  
  X
  
  
 

希望本文所述对大家学习javascript程序设计有所帮助。