1. <!DOCTYPE html > 
    2. 

  2. <%@ page language="java" contentType="text/html; charset=UTF-8" 
    3. 

  3.     pageEncoding="UTF-8"%> 
    4. 

  4. <%@ include file="/common/taglibs.inc"%> 
    5. 

  5. <html> 
    6. 

  6. <head> 
    7. 

  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    8. 

  8. <title>测试下拉框</title> 
    9. 

  9. <script type="text/JavaScript" src="${ctx }/js/jquery1.7.2.js"></script> 
    10. 

  10. <script type="text/javascript"> 
    11. 

  11.     function previewIMG(img) { 
    12. 

  12.         if (img.files && img.files[0]) { 
    13. 

  13.             var reader = new FileReader(); 
    14. 

  14.             reader.onload = function(e) { 
    15. 

  15.                 $('#blah') 
    16. 

  16.                 .attr('src', e.target.result); 
    17. 

  17.             } 
    18. 

  18.             reader.readAsDataURL(img.files[0]); //URL是一起的，编辑器可能认为是敏感字符串，去掉空格就可以了
    19. 

  19.  
    20. 

  20.             $("#imgDiv").show(); 
    21. 

  21.         } else { 
    22. 

  22.             //IE下，使用滤镜        
    23. 

  23.             img.select();     
    24. 

  24.             var imgSrc = document.selection.createRange().text;     
    25. 

  25.             var localImagId = document.getElementById("blah");       //必须设置初始大小     
    26. 

  26.             localImagId.style.width = "450px";     
    27. 

  27.             localImagId.style.height = "300px";       
    28. 

  28.             //图片异常的捕捉，防止用户修改后缀来伪造图片     
    29. 

  29.             try{           
    30. 

  30.                 localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";   
    31. 

  31.                 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;     
    32. 

  32.                 }catch(e){           
    33. 

  33.                     alert("您上传的图片格式不正确，请重新选择!");      
    34. 

  34.                     return false;      
    35. 

  35.                 } 
    36. 

  36.                 document.selection.empty(); 
    37. 

  37.                 $("#imgDiv").show(); 
    38. 

  38.         } 
    39. 

  39.     } 
    40. 

  40. </script> 
    41. 

  41. </head> 
    42. 

  42. <body> 
    43. 

  43.     <input type="file" id="loadFile" name="loadFile" 
    44. 

  44.         onchange="previewIMG(this)" /> 
    45. 

  45.         <div id="imgDiv" style="display:none;"> 
    46. 

  46.             <img id="blah"> 
    47. 

  47.         </div> 
    48. 

  48. </body> 
    49. 

  49. </html> 
    50. 



上面的代码兼容FF\IE8\9，其他的没有测试过。欢迎大家测试。


在网上找了很多都没有能兼容的，后来就查了下html5的filereader，火狐下的是用filereader做的。其实上面的代码只要浏览器可以使用html5可以兼容。样式有点丑。凑合着看.上个图片预览下


 


图片上传前预览


火狐下：


 


图片上传前预览