图片上传后即时预览


图片上传后即时预览

  1. <!DOCTYPE html>
  2. html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5.     //设置图片上传后预览的div样式
  6.     <style type="text/css">
  7.         #preview, .img, img
  8.         {
  9.         width:200px;
  10.         height:200px;
  11.         }
  12.         #preview
  13.         {
  14.         border:1px solid #000;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="preview"></div>
  20.     <input type="file" onchange="preview(this)" />
  21.     //图片上传和预览
  22.     <script type="text/javascript">
  23.         function preview(file)
  24.         {
  25.         var prevDiv = document.getElementById('preview');
  26.         if (file.files && file.files[0])
  27.         {
  28.         var reader = new FileReader();
  29.         reader.onload = function(evt){
  30.         prevDiv.innerHTML = '
  31.         <img src="' + evt.target.result + '" />
  32.         ';
  33.         }
  34.         reader.readAsDataURL(file.files[0]);
  35.         }
  36.         else
  37.         {
  38.         prevDiv.innerHTML = '
  39.         <div class="img"
  40.             style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>
  41.         ';
  42.         }
  43.         }
  44.     </script>
  45. </body>
  46. /html>

优化建议

删去 #preview, .img, img 中 对于高 height 的设置,即:
#preview, .img, img {

width:200px;

}

这样,显示出来的图象,仍然保持原有的 宽/高 之比例。

2. 删去

的属性:

style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,

即:

var s = '

';

prevDiv.innerHTML=s;

这样,仍然保持原有的功能。

声明:大家学-卢卫湘|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 图片上传后即时预览


加vx: beyonds 备注:app上架 lwxshow