Javascript 文件上传：检查图像是否有效

我想上传这样的文件：

<input type="file" name="uploadPicture"/>

有没有办法在javascript中确定所选文件是否为有效图像

我知道我可以检查文件扩展名。问题是有人可以将

.txt

文件更改为

.jpg

，它将通过验证。

首先在输入中添加

accept=“image/*”

，以仅接受图像文件

<input type="file" name="uploadPicture" accept="image/*" onChange="validateAndUpload(this);"/>

谢谢。你的回答使我接近我想要的

Image.onload

仅当文件是有效图像时才会调用。因此，无需在

onload（）

回调中检查

this.width

要检测它是否为无效图像，可以使用

image.onerror

$（）.ready（函数（））{
$（'[type=“file”]'）。更改（函数（）{
var fileInput=$（此值）；
if（fileInput.length&&fileInput[0].files&&fileInput[0].files.length）{
var url=window.url | | window.webkitURL；
var image=新图像（）；
image.onload=函数（）{
警报（“有效图像”）；
};
image.onerror=函数（）{
警报（“无效图像”）；
};
image.src=url.createObjectURL（fileInput[0].files[0]）；
}
});
});
除了向输入中添加
accept=“image/*”
之外，请检查文件类型属性：

imageFile.type.includes（'image'）

或者对于非常旧的浏览器：

imageFile.type.match（/image/）

要获取
imageFile
正在引用的文件本身，请向输入添加事件侦听器。在
change
上获取带有
event.currentTarget.files[0]的文件
 你打算怎么上传？也许你可以在服务器端检查一下？或者您可以将图像加载到HTML文件API并检查mime类型。非jQuery呢？这不起作用。您还需要订阅OneError事件。仅当图像有效时才会调用onload。创造性的答案！这是最好的答案记住使用URL.revokeObjectURL（image.src）在不再需要时释放此ObjectURL使用的内存。dropzone中是否有这样做的功能？我使用AWS来存储文件，所以我必须覆盖dropzone的图标绘图来加载amazon lambda生成的缩略图。但我仍然希望在上传到S3、触发lambda并等待结果之前验证图像是否正常。
function validateAndUpload(input){
    var URL = window.URL || window.webkitURL;
    var file = input.files[0];

    if (file) {
        var image = new Image();

        image.onload = function() {
            if (this.width) {
                 console.log('Image has width, I think it is real image');
                 //TODO: upload to backend
            }
        };

        image.src = URL.createObjectURL(file);
    }
};​