使用Javascript上傳後無法獲取文件大小

我遇到問題。我需要驗證一個具有所需寬度，高度的文件字段，並且如果文件沒有使用Javascript上傳，但它不會像這樣發生。我在下面解釋我的代碼。使用Javascript上傳後無法獲取文件大小

<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。我也檢查文件是否沒有上傳。請幫我解決這個問題。

來源

2017-05-17 satya

Pu在onload函數內的日誌語句。這是因爲你試圖訪問其範圍以外的變量，否則定義的onload功能

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

DEMO

假設我有一個按鈕，並沒有選擇文件，如果我點擊在外面這些變量文件警報應該說選擇文件。

似乎你不能這樣做與onchange事件處理程序，因爲如果文件沒有加載。沒有任何變化，所以功能不會觸發。在這種情況下，你可以創建一個變量&更新文件上傳的狀態。在按鈕的點擊檢查變量狀態

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

來源

2017-05-17 08:52:56 brk

Thank you.its working。如何檢查文件尚未選擇。 – satya

無法得到你的意思 – brk

假設我有一個按鈕，並且沒有選擇文件，如果我點擊文件警報應該說選擇文件。 – satya

你好，你只需登錄你的高度和寬度bg.onload功能。這些都是內部的variables.thats範圍你爲什麼不在外面得到高度和寬度這樣

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); 
};

}

來源

2017-05-17 08:55:58

一切都在你的代碼很好，你需要包括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（）函數知道文件是否被選中或不。

來源

2017-05-17 09:06:49

使用Javascript上傳後無法獲取文件大小

回答

相關問題