上传图片后，图片缩放不成功。求大牛赐教

2013-11-15

上传图片后，图片缩放不成功。。。求大牛指教1.使用的是uploadify上传组件div classpages idpagesdiv

上传图片后，图片缩放不成功。。。求大牛指教
1.使用的是uploadify上传组件


<div class="pages" id="pages">
    <div id="content">
        <div class="upload-form">
            <dl>
                <dt>上传图片</dt>
                <dd class="uploader"><div id="file_upload"></div></dd>
            </dl>
        </div>
        <div class="insert-pool"></div>
        <div class="example">
            <img alt="上传图片后，图片缩放不成功。求大牛赐教" src="http://localhost:5917/UploadFiles/Images/3242035072.jpg" onload="imgResize(64,64,this)" />
        </div>
    </div>
</div>

图片是上传成功后，返回的一个图片相对路径。。。再在img中显示，然后是希望执行onload
图片缩放，但是不成功。。。

不明白图片加载原理，望大牛指教


<script type="text/javascript">
    //图片等比例缩放
    function imgResize(maxWidth, maxHeight, imgObj) {
        var image = new Image();
        image.src = imgObj.src;

        if (image.width > 0 && image.height > 0) {
            //debugger;
            if (image.width / image.height >= maxWidth / maxHeight) {
                if (image.width > maxWidth) {
                    imgObj.width = maxWidth;
                    imgObj.height = (image.height * maxWidth) / image.width;
                } else {
                    imgObj.width = image.width;
                    imgObj.height = image.height;
                }
                imgObj.alt = image.width + "×" + image.height;
            } else {
                if (image.height > maxHeight) {
                    imgObj.height = maxHeight;
                    imgObj.width = (image.width * maxHeight) / image.height;
                } else {
                    imgObj.width = image.width;
                    imgObj.height = image.height;
                }
                imgObj.alt = image.width + "×" + image.height;
            }
        } else {
            alert("缩放失败，未能成功获取原图宽高");
        }
    }

    $(function () {
        var count = 0;  //已上传图片总数
        //上传图片
        $("#file_upload").uploadify({
            'fileSizeLimit': '2048KB',
            'fileTypeExts': '*.gif; *.jpg',
            'queueSizeLimit': 3,
            'queueID': 'file_upload_queue',
            'auto': true, 
 
            "swf": "/js/uploadify/uploadify.swf",
            "uploader": "/Handler/ImgUploadHandler.ashx",
            "buttonText": "选择图片并上传",
            'onUploadSuccess': function (file, data, response) {
                if (data != "" && data.length > 0) {
                    alert(data);
                    $("<li><div class="img-box"><img src="http://localhost:5917" + data + "" onload="imgResize(64,64,this);" /></div></li>").appendTo(".insert-pool");
                } else {
                    image.src = imgObj.src;
                    alert("文件上传数据为空");
                }
            }

        });
    });
</script>

upload javascript jquery asp.net 图片上传缩放
[解决办法]


js控制图片大小
  <script src="js/jquery-1.5.js" type="text/javascript"></script>

    <script>
    $(function(){
    var ywidth=64;
    var yheight=64;
    $(".example img").each(function()
    {     
        var imgDemw=$(this).width();
        var imgDemh=$(this).height();

    
        var rate = (ywidth/imgDemw < yheight/imgDemh)?ywidth/imgDemw:yheight/imgDemh;
        //如果 指定高度/图片高度  小于  指定宽度/图片宽度 ，  那么，我们的比例数 取 指定高度/图片高度。
        //如果 指定高度/图片高度  大于  指定宽度/图片宽度 ，  那么，我们的比例数 取 指定宽度/图片宽度。
        
        if(rate <= 1){   
            $(this).width(imgDemw*rate) ; //图片新的宽度 = 宽度 * 比例数
            
            $(this).height(imgDemh*rate);
            //图片垂直居中
               var hei=165;
               var heig= (hei- $(this).height())/2;
              $(this).css("padding-top",heig); 
        }else{//  如果比例数大于1，则新的宽度等于以前的宽度。
            $(this).width(imgDemw);
            $(this).height(imgDemh) ;
            
        }
    });
    });
    </script>


<div class="example"><img src="..." /></div>

热点排行