javascript预览图片,按比例控制图片大小

最近在做一个小Blog,要用到javascript预览图片,然后上传。找到了园子里一篇文章

http://www.cnblogs.com/cowboy/archive/2006/10/14/390808.html

测试发现效果非常好。

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片预览title>
ExpandedBlockStart.gifContractedBlock.gif
<script>
function PreviewPhotoatwidth(photo_file,img_object,imgwidth)
ExpandedSubBlockStart.gifContractedSubBlock.gif
{

var fileext=photo_file.value.substring(photo_file.value.lastIndexOf("."),photo_file.value.length);
        fileext
=fileext.toLowerCase();
           
if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&(fileext!='.bmp'))
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
             photo_file.focus();
        }

        
else
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
        
        img_object.src
=photo_file.value;
       
        
if (img_object.width>imgwidth)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
            img_object.width
=imgwidth;
            
        }

        
      }

}

script>

head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  
<tr>
    
<td align="center"><img id="picpreview" alt='预览' />td>
  
tr>
  
<tr>
    
<td align="center"><form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
      
<label>update
        
<input type="file" id="uppic" name="uppic" onchange="javascript:PreviewPhotoatwidth(this,picpreview,260)" />
        
label>
    
form>
    
td>
  
tr>
  
<tr>
    
<td> td>
  
tr>
table>
body>
html>

 

就是发现有一点儿问题:加载过宽度大于 最大宽度 的图片后,再加载图片,宽度都固定到最大不再变化。
原因很简单:img_object.width 读取的是上次加载的图片大小,而不是当前的。(javascript只懂一点点,不知道理解的对不对。)

由着想到了.net里的image对象,通过image对象获得图片大小,然后再设置宽度不就行了。baiud一下,javascript image 对象,果然有这个东西。

修改后的代码:

 

ContractedBlock.gif ExpandedBlockStart.gif Code
render_editor('rich', 'rich', 0);
function PreviewPhotoatwidth(photo_file, img_object, imgwidth) {

    var fileext = photo_file.value.substring(photo_file.value.lastIndexOf("."), photo_file.value.length);
    fileext = fileext.toLowerCase();
    if ((fileext != '.jpg') && (fileext != '.gif') && (fileext != '.jpeg') && (fileext != '.png') && (fileext != '.bmp')) {
        alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
        photo_file.focus();
    }
    else {
        heavyImage = new Image();
        heavyImage.src = photo_file.value;
        
        img_object.src = photo_file.value;

        //alert(heavyImage.width);
        if (heavyImage.width > imgwidth) {
            img_object.width = imgwidth;
        } else { img_object.width = heavyImage.width; }

    }
}

 

问题解决,发上来分享。

转载于:https://www.cnblogs.com/mx1700/archive/2008/11/14/1333838.html

你可能感兴趣的:(javascript预览图片,按比例控制图片大小)