使用jquery ui可调整大小的工作与img从ajax上传,img的宽度和高度将变为零,如何在更改前获取值?

时间:2013-01-25 05:06:17

标签: php jquery ajax

使用jQuery ui可调整大小的工作与来自ajax上传的img,如果没有在css中设置img宽度和高度(auto也不起作用),
img将更改为0 0,无法看到img。
我该如何解决?在resizable或任何其他建议之前捕获img大小?

感谢。

JS

$('.btn').click(function(){
    $.ajax({
        type: "POST",
        url: "upload.php",
        data:fd, // new FormData()..
        processData: false,
        contentType: false,
        success: function(html){
            var img = $(html).filter('.img_wp').html();
            $('.container').append(img);

            $('.upload_img img').resizable();
        }
    });
});

PHP

$filename = $_FILES['file_upload_tmp']['name'];
$filetmp_name = $_FILES['file_upload_tmp']['tmp_name'];
$filetype = $_FILES['file_upload_tmp']['tmp_name'];
$filetype_accept = $filetype == 'image/jpg';

if($_FILES){
    if($filetype_accept){
        move_uploaded_file($filetmp_name, 'upload/tmp/'.$filename);
        print"
            <div class=\"img_wp\">
                <div class=\"upload_img\" id=\"$layer\">
                    <img src=\"upload/tmp/$filename\">
                </div>
            </div>
        ";
    }
    else{
        print"upload file error, plz upload file type: $filetype";
    }
}
else{
    print"
        <div class=\"upload\">
            <form enctype=\"multipart/form_data\">
                <input type=\"file\" name=\"file_upload_tmp\">
                <input type=\"submit\" value=\"upload\" class=\"btn\">
            </form>
        </div>
        <div class=\"container\"></div>
    ";
}

1 个答案:

答案 0 :(得分:1)

设置.resizable()时可能无法加载图像。尝试在图像加载时进行设置。

            $('.upload_img img').on('load', function(){
                $(this).resizable();
            });