我有以下'file'类型的输入字段:
<input id="company_logo" name="company_logo" type="file" accept="image/png,image/jpg,image/jpeg">
<img id="logo_preview" src="#" alt="Your Logo" />
一旦选择了有效文件,我将使用以下代码预览上传的图像:
$("#company_logo").change(function() {
displayUploadedLogo(this);
});
function displayUploadedLogo(input) {
if (input.files && input.files[0]) {
var file = input.files[0];
var fileType = file["type"];
var ValidImageTypes = ["image/jpg", "image/jpeg", "image/png"];
if ($.inArray(fileType, ValidImageTypes) > 0) {
// If uploaded image is within array of valid image types
var reader = new FileReader();
reader.onload = function(e) {
$('#logo_preview')
.attr('src', e.target.result)
.width(75)
.height(75)
.css('display', 'block');
};
reader.readAsDataURL(input.files[0]);
} else {
// Uploaded file is not an image
$('#logo_preview').css('display', 'none');
}
}
}
这基本上有效,但我想另外验证所选图像具有特定图像尺寸(例如200 x 200像素)。不符合尺寸要求(更大或更小)的图像应该被拒绝并带有错误消息。
非常感谢您的建议如何解决这个问题。