如何驗證每次上傳的圖像大小

我試圖上傳大於900像素的圖像。所以我確實上傳時進行驗證。當我們點擊這個另一個文件按鈕時，我會有加號。如何驗證每次上傳的圖像大小

只有我得到的第一個輸入框值。我無法獲得其他文件。

<input type="file" id="upload_profile" class="upload_profile" name="upload_profile[]" />

腳本：

var _URL = window.URL || window.webkitURL; 
$(".upload_profile").change(function(e) { 
var file, img; 
if ((file = this.files[0])) { 
    img = new Image(); 
    img.onload = function() { 
     alert(this.width + " " + this.height); 
    }; 
    img.onerror = function() { 
     alert("not a valid file: " + file.type); 
    }; 
    img.src = _URL.createObjectURL(file); 
} 
});

來源

2015-10-05 ammni

使用'$（文件）。在（ '變'， '.upload_profile'，函數（E）{...}）;' – Phylogenesis

在你的代碼的變量i沒有定義（var file，img，i = 0;），如果我聲明它，那麼你的給定的代碼工作正常。請使用提琴手瞭解更多http://fiddle.jshell.net/nzyu0q0q/ –

@Phylogenesis：它的工作..謝謝 – ammni

當連接事件等元素是不存在的DOM，你需要使用event delegation。事件委託允許我們將一個事件監聽器附加到一個父元素，該元素將針對與選擇器匹配的所有後代觸發，無論這些後代是現在存在還是將來添加。

var _URL = window.URL || window.webkitURL; 
 
$(document).on('change', '.upload_profile', function() { 
 
if (this.value) { 
 
    var file = this.files[0]; 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
     alert(this.width + " " + this.height); 
 
    }; 
 
    img.onerror = function() { 
 
     alert("not a valid file: " + file.type); 
 
    }; 
 
    img.src = _URL.createObjectURL(file); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="file" class="upload_profile" name="upload_profile[]" /><br><br> 
 
<input type="file" class="upload_profile" name="upload_profile[]" /><br><br> 
 
<input type="file" class="upload_profile" name="upload_profile[]" /><br><br>

來源

2015-10-05 10:44:50 Rayon

如何驗證每次上傳的圖像大小

回答

相關問題