Question

我正在尝试上传大于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);
}
});

Answer 1

当附加事件时，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>

如何在每次上传中验证图像大小

1 个答案: