如何在AJAX sucess函数中调用element.onload?

时间:2017-03-31 11:01:27

标签: javascript jquery ajax file-upload height

我在php codeignitor中使用AJAX上传图片,并在上传时返回包含上传图片路径的JSON响应,然后我将该路径插入img标签进行预览

现在我要做的是在更新路径后获取渲染的img标签的高度和宽度,但问题是我总是得到0,所以请有人帮我这里

这是我的JS


    function uploadAd(){
    // console.log($('#uploadedPDF').prop('files'));
    var file_data = $('#uploadedAdFile').prop('files')[0];
    var form_data = new FormData();
    form_data.append('uploadedAdFile', file_data);
    // alert(form_data);
    $.ajax({

      url: BASE_URL+'home/uploadAdFile', // point to server-side PHP script
      dataType: 'json',  // what to expect back from the PHP script, if anything
      cache: false,
      contentType: false,
      processData: false,
      data: form_data,
      type: 'post',
      async: false,
      success: function(data){
          console.log(data);
          if(data.status == -1){
            // If file extension Validation failed
            $('#uploadedAdFileMsg').html(data.msg);
            $('#uploadedAdFileMsg').removeClass('hidden');
            $('#uploadedAdFilePreview').addClass('hidden');
          }
          else{
            // If file extension Validation passed
            $('#uploadedAdFilePreview').attr('src', data.path); // Render file in img tag

            $('#uploadedAdFileMsg').addClass('hidden');
            $('#uploadedAdFilePreview').removeClass('hidden');

            console.log(document.getElementById('uploadedAdFilePreview').naturalWidth);
            // console.log()
          }
      },
      complete: function(){
        console.log('Complte '+document.getElementById('uploadedAdFilePreview').naturalWidth);
      }
    }).done(function(){
      console.log('Done '+document.getElementById('uploadedAdFilePreview').naturalWidth);
    });
  }
  $(document).ajaxComplete(function(){
    console.log('AJAX '+document.getElementById('uploadedAdFilePreview').naturalWidth);
  })

你可以看到我在各个地方插入了获取高度代码但没有运气

PS:我使用了clientHeight,height,naturalHeight,但仍然是0

所以我得出的结论是在img标签呈现其内容之前调用高度函数因此它显示为0

所以我可以在AJAX成功函数中包含一个onload类型的函数吗?

感谢

1 个答案:

答案 0 :(得分:0)

我解决了它:D,

实际上我在Jquery返回的对象上使用onload是错误的,它应该在document.getElement上使用,所以我放了一个

element.onload = function(){ getHeight(); }

在我的成功函数os AJAX中,它工作了:)