添加单张图片预览

  1. <!DOCTYPE html>  
  2.  <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  5. <style type="text/css">  
  6.  #preview, .img, img  
  7.  {  
  8.  width:200px;  
  9.  height:200px;  
  10.  }  
  11.  #preview  
  12.  {  
  13. border:1px solid #000;  
  14. }  
  15.  </style>  
  16.  </head>  
  17. <body>  
  18.  <div id="preview"></div>  
  19. <input type="file" onchange="preview(this)" />  
  20.  <script type="text/javascript">    
  21.  function preview(file)  
  22.  {  
  23.  var prevDiv = document.getElementById('preview');  
  24.  if (file.files && file.files[0])  
  25.  {  
  26.  var reader = new FileReader();  
  27.  reader.onload = function(evt){  
  28.  prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';  
  29. }    
  30.  reader.readAsDataURL(file.files[0]);  
  31. }  
  32.  else    
  33.  {  
  34.  prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';  
  35.  }  
  36.  }  
  37.  </script>  
  38.  </body>  
  39.  </html>  
posted @ 2016-08-04 14:55  qjy12  阅读(139)  评论(0)  编辑  收藏  举报