javascript - ajax上传后获取图片大小

Question

我正在开发一个允许用户使用 ajax 异步上传图像的工具。然后用户可以使用 jQuery UI 中的 slider 调整其图像的大小。 但是，我在获取图像大小以调整图像大小的变量值方面遇到了一些麻烦，因为加载页面时没有图像，因此变量设置为零。

我想找到一种在上传图片后立即刷新 orginalWidth 和 orginalHeight 的方法。

代码如下:

//Upload the image with AJAX

$('#uploadForm').on('change', (function(e){
e.preventDefault();
    $.ajax({
        url: "upload.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(data)
        {
        $("#image").attr('src',data);
        },
        error: function() 
        {
        }           
   });
}));

    //Resize slider with jQuery UI
    
        
    var orginalWidth  = $("#image").width();
    var orginalHeight = $("#image").height();
        
    $("#infoSlider").text(orginalWidth + ', ' + orginalHeight + ', 100%');

    $("#slider").slider({
        value: 0,
        min: -50,
        max: 50,
        step: 10,
        slide: function (event, ui) {
        
        var fraction = (1 + ui.value / 100),
        newWidth = orginalWidth * fraction,
        newHeight = orginalHeight * fraction;

            $("#infoSlider").text(newWidth + ', ' + newHeight + ', ' + Math.floor(fraction * 100) + '%');

            $("#image").width(newWidth);
        }
    });

编辑:

所以@FlashThunder 告诉我使用 PHP 来获取图像大小。但是我的 PHP 代码不起作用(JS 变量“未定义”)。

PHP 代码:

//Check if the file is well uploaded
if($_FILES['file']['error'] > 0) { echo 'Error during uploading, try again'; }

//We won't use $_FILES['file']['type'] to check the file extension for security purpose

//Set up valid image extensions
$extsAllowed = array( 'jpg', 'jpeg', 'png', 'gif' );

//Extract extension from uploaded file
    //substr return ".jpg"
    //Strrchr return "jpg"
    
$extUpload = strtolower( substr( strrchr($_FILES['file']['name'], '.') ,1) ) ;

//Check if the uploaded file extension is allowed

if (in_array($extUpload, $extsAllowed) ) { 

    //Upload the file on the server

    $name = "img/{$_FILES['file']['name']}";
    $result = move_uploaded_file($_FILES['file']['tmp_name'], $name);


    if($result){
        //echo "$name";
        
        //Save the image size
        //$filename = $_FILES['file']['tmp_name'];
        list($width, $height) = getimagesize($name);
        $data = array('src' => $name, 'width' => $width, 'height' => $height);
        echo json_encode($data);
        
    }
    
} else { echo 'File is not valid. Please try again'; }

JS代码:

$.ajax({
            url: "upload.php",
            type: "POST",
            //data:  new FormData(this),
            data : 'json',
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                $("#image").attr('src', data.src);
                var orginalWidth  = data.width;
                var orginalHeight = data.height;
                alert(orginalWidth);
            },
            error: function() 
            {
            }           
       });

Answer 1

您可以使用 PHP 上传脚本来执行此操作。它可以返回描述图像大小的对象，并在 Ajax 成功函数中获取值。

例如 PHP 可以包含这样的东西:

$data = array('src' => $src,'width' => $width, 'height' => $height);
echo json_encode($data);

在 JS 中:

...
dataType: 'json',
...
success: function(data){
   $("#image").attr('src',data.src);
   console.log(data.height);
   console.log(data.width);
}

正是这样的:

$.ajax({
   url: "upload.php",
   type: "POST",
   data:  new FormData(this),
   dataType : 'json',
   contentType: false,
   cache: false,
   processData:false,
   success: function(data){
       $("#image").attr('src',data.src);
       console.log(data.height);
       console.log(data.width);
   },         
});

图片大小可以通过PHP函数获取getimagesize() .