javascript - 使用ajax上传后获取图像大小

我正在研究一种允许用户使用Ajax异步上传图像的工具。然后，用户可以使用Jquery UI中的滑块调整图像大小。
但是，我在使用变量值时遇到麻烦，这些变量值会获取用于调整图像大小的图像大小，因为加载页面时没有图像，因此变量设置为零。
我想找到一种在上传图像后刷新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 extention 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()
            {
            }
       });

最佳答案

您可以使用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()获得。