1. <html>
  3. <head>
  4.   <script>
  5.     window.onload=function() { 
  6.         document.getElementById('file').onchange = function(evt) { // 如果浏览器不支持FileReader，则不处理 
  7.             if (!window.FileReader) return; 
  8.             var files = evt.target.files; 
  9.             for (var i = 0, f; f = files[i]; i++) { 
  10.                 if (!f.type.match('image.*')) {
  11.                  continue; 
  12.                 } 
  13.                 var reader = new FileReader(); 
  14.                 reader.onload = (function(theFile) { 
  15.                 return function(e) { 
  16.                     // img 元素----生成图片地址 
  17.                 document.getElementById('previewImage').src = e.target.result; 
  19.             }; 
  20.         })(f); 
  21.                 reader.readAsDataURL(f); 
  23.                 } 
  24.             } 
  25.         } 
  28. </script>
  29. </head>
  31. <body>
  32.   <input type="file" name="" id="file" />
  33.   <img id="previewImage" style="height:200px;width:200px;" />
  34. </body>
  36. </html>