Javascriptを使用してアップロードした後にファイルサイズを取得できません

Question

問題があります。私は必要な幅、高さとファイルがJavascriptを使用してアップロードされていない場合は、このような起こっていない場合、1つのファイルフィールドを検証する必要があります。私は以下のコードを説明しています。

<input type="file" name="copImage" id="copImage" class="form-control" value="" onchange="setBackgroundImage(event);"> 
function setBackgroundImage(e){ 
    var url = URL.createObjectURL(e.target.files[0]); 
    bg = new Image(); 
    bg.src = url; 
    bg.onload = function() { 
     bgLoaded = true; 
     backImageHeight=this.height; 
     backImageWidth=this.width; 
    }; 
    console.log('size bg',backImageHeight,backImageWidth); 
    } 

ここでファイルheight and widthを取得できませんでした。私はまた、ファイルがアップロードされていないことを確認する。この問題を解決するのを手伝ってください。

Answer 1

Puログの文はonloadの内部にあります。あなたが他の

bg.onload = function() { 
    var bgLoaded = true, 
    backImageHeight = this.height, 
    backImageWidth = this.width; 
    console.log('size bg',backImageHeight,backImageWidth); 
    }; 

DEMO

iが1つのボタンを持っているし、ファイルを選択せず​​に、私は上 をクリックしていた場合に想定のonload関数の外でこれらの変数を定義し、その範囲外の変数にアクセスしようとしているためですファイルアラートはファイルを選択するように指示する必要があります。

ファイルがロードされていないため、onchangeイベントハンドラでは実行できないようです。何も変わっていないので、機能は消えません。その場合、変数&を作成してファイルのアップロード時に状態を更新することができます。なぜないvariables.thatsの範囲外のボタンのクリックで

var isFileLoaded = false; 
function setBackgroundImage(fileValue) { 
    var url = URL.createObjectURL(fileValue.files[0]); 
    bg = new Image(); 
    if (fileValue.value !== '') { 
    bg.src = url; 
    bg.onload = function() { 
     bgLoaded = true; 
     isFileLoaded = true; 
     backImageHeight = this.height; 
     backImageWidth = this.width; 
     console.log('size bg', backImageHeight, backImageWidth); 
    }; 
    } 
} 

function buttonClick() { 
    if (isFileLoaded) { 

    } else { 
    alert('No file selected') 
    } 

} 

DEMO 2

Answer 2

こんにちはあなただけbg.onloadのfunction.theseの内側にあなたの高さと幅をログに記録する必要がある変数の状態をチェックしていますこの

function setBackgroundImage(e){ 
var url = URL.createObjectURL(e.target.files[0]); 
bg = new Image(); 
bg.src = url; 
bg.onload = function() { 
    bgLoaded = true; 
    backImageHeight=this.height; 
    backImageWidth=this.width; 
     console.log('size bg',backImageHeight,backImageWidth); 
}; 

}

Answer 3

すべてのような高さと幅を取得すると、あなたのコードで結構です、あなたはbg.onlo内にconsole.log（）を含める必要がありこのような広告ブロックのみ。

function setBackgroundImage(e) 
{ 
    var url = URL.createObjectURL(e.target.files[0]); 
    bg = new Image(); 
    bg.src = url; 
    bg.onload = function() { 
     bgLoaded = true; 
     backImageHeight=this.height; 
     backImageWidth=this.width; 
     console.log('size bg',backImageHeight,backImageWidth); 
    }; 

} 

function isFileSelected() 
{ 
    return document.getElementById('copImage').files.length > 0; 
} 

あなたは、ファイルが選択されているかどうかを知るためにisFileSelected（）機能を使用することができます。