我在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类型的函数吗?
感谢
答案 0 :(得分:0)
我解决了它:D,
实际上我在Jquery返回的对象上使用onload是错误的,它应该在document.getElement
上使用,所以我放了一个
element.onload = function(){ getHeight(); }
在我的成功函数os AJAX中,它工作了:)