图片上传后即时预览

hussion的头像 hussion 0 2016-04-14 10:21 12

 基本信息

× 1   

浏览数: 29599

分享时间: 2 年 前

24

[HTML]代码    

 <!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		//设置图片上传后预览的div样式
		<style type="text/css">
			#preview, .img, img
			{
			width:200px;
			height:200px;
			}
			#preview
			{
			border:1px solid #000;
			}
		</style>
	</head>
	<body>
		<div id="preview"></div>
		<input type="file" onchange="preview(this)" />
		//图片上传和预览
		<script type="text/javascript">
			function preview(file)
			{
			var prevDiv = document.getElementById('preview');
			if (file.files && file.files[0])
			{
			var reader = new FileReader();
			reader.onload = function(evt){
			prevDiv.innerHTML = '
			<img src="' + evt.target.result + '" />
			';
			}
			reader.readAsDataURL(file.files[0]);
			}
			else
			{
			prevDiv.innerHTML = '
			<div class="img"
				style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>
			';
			}
			}
		</script>
	</body>
</html>  
为此代码点赞!
1 年 前 op_liu679
不错的js 代码
1 年 前 Ckc520
为此代码点赞!
1 年 前 jzc_001

12 3 [下一页]

  • tcxu的头像 tcxu 2016-05-04 20:56 代码数:0

    为此代码点赞!

     

    建议

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

    #preview, .img, img {

    width:200px;

    }

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

        2. 删去 <div > 的属性:

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

    即:

    var s = '<div class="img"';

    s+='src=\'' + file.value + '\'"></div>';

    prevDiv.innerHTML=s;

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

    最后编辑 2 年 前

  • shanghe306的头像 shanghe306 2016-10-08 12:30 代码数:0

    不错的js 代码,二楼建议也不错。

  • williams26的头像 williams26 2016-12-23 16:25 代码数:0

    好的,谢谢

  • cixexey的头像 cixexey 2017-11-13 19:10 代码数:0

    I found that site very usefull and this survey is very cirious, I ' ve never seen a blog that demand a survey for this actions, very curious...  new futura new futura new futura new futura new futura new futura new futura new futura new futura new futura

  • 素材火的头像 素材火 2017-11-22 11:01 代码数:0

    我收集了很多图片上传代码,有兴趣可以看看

    http://www.sucaihuo.com/js/101-0-0-0

  • ruida.deng的头像 ruida.deng 2017-01-10 10:03 代码数:0

  • cixexey的头像 cixexey 2017-11-24 00:11 代码数:0

    Great article with excellent idea!Thank you for such a valuable article. I really appreciate for this great information.. Contract Phone Deals

     
     
     
  • cixexey的头像 cixexey 2017-11-25 02:23 代码数:0

    This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses.

    Things to do

  • 595809071的头像 595809071 2017-12-12 12:19 代码数:0

    不错,效果很好,学习了

  • qianyu1024的头像 qianyu1024 2017-02-03 09:42 代码数:0

    不错,效果很好,学习了

您的评论: