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

我正在开发一个工具，允许用户使用ajax异步上传图像。然后用户可以通过jqueryui中的滑块调整图像大小。 但是，我在变量值方面遇到了一些问题，这些变量值用于调整图像大小，因为加载页面时没有图像，所以变量设置为零

我想找到一种方法来刷新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() 
            {
            }           
       });

---

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

例如，PHP可能包含如下内容：

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

$.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);
   },         
});

在JS中：

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

完全是这样的：

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

$.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函数获得。

您必须将图像大小设置为加载图像的大小

success: function(data){
    $("#image").one('load',function() {
        var orginalWidth  = $("#image").width();
        var orginalHeight = $("#image").height();
    }).attr('src',data);
},

---

我想避免使用PHP，但如果我没有任何选择，我会使用它。您可以使用

load

函数，在加载到浏览器中后获取图像大小，但它并不总是有效。有很多问题，特别是当图像不是新的并且在缓存中时。@casusbelli:编辑以回答您的问题。是的，问题是您更改了ajax请求中的

数据
选项。。。您应该添加
数据类型：“json”
-两个不同的选项<代码>数据
是通过
POST
方法发送到服务器的内容。。。而
dataType
是服务器返回的结果所期望的。编辑答案以显示完整的JS功能。没问题。。。很高兴我能帮忙。祝你好运