Html5和js实现图片上传后即时预览

文章目录[隐藏]

源码

  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>

说明

1、删去 #preview, .img, img 中 对于高 height 的设置

#preview, .img, img {

width:200px;

}

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

2、 删去 <div > 的属性:

  1. style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
  2.  
  3. 即:
  4.  
  5. var s = '<div class="img"';
  6.  
  7. s+='src=\'' + file.value + '\'"></div>';
  8.  
  9. prevDiv.innerHTML=s;

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


发布日期:

所属分类: JavaScript/jquery 标签: