使用jquery/javascript进行文件上传验证

我只想上传图片。我的代码将检测它是否是图像，但我想禁用按钮，直到文件选择正确，即图像。只有这样，按钮才能启用

它是使用AngularJs、javascipt还是jQuery并不重要

<SCRIPT type="text/javascript">
    function ValidateFileUpload() {
        var fuData = document.getElementById('fileChooser');
        var FileUploadPath = fuData.value;

        //To check if user upload any file
        if (FileUploadPath == '') {
            alert("Please upload an image");

        } else {
            var Extension = FileUploadPath.substring(
                FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

            //The file uploaded is an image

            if (Extension == "gif" || Extension == "png" || Extension == "bmp"
                || Extension == "jpeg" || Extension == "jpg") {

                // To Display
                if (fuData.files && fuData.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#blah').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(fuData.files[0]);
                }

            }

            //The file upload is NOT an image
            else {
                alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");

            }
        }
    }

使用设置为图像的属性/*

---

你可以使用一些文件上传库。我喜欢这样：这几乎是2分钟前的副本。您发布的解决方案与有什么不同？我想我们几乎同时发布了接近1分钟的差异。accept=image/*但它没有正确验证，因为如果用户选择另一个文件，那么solution@chaitanyaaccept=image/*但未正确验证，因为如果用户选择另一个文件，那么解决方案是什么？您所说的“但未正确验证”是什么意思？用户应该只能从MIME类型以image/@chaitanya开头的用户文件系统中选择文件，请尝试在onchange=returnValidateFileUpload处删除return；函数名似乎是is ValidateFileUpload而不是returnValidateFileUpload

<input type="file" name="dataFile" id="fileChooser" onchange="returnValidateFileUpload()" /><img src="images/noimg.jpg" id="blah"></br><input type="submit" value="submit" id="submit"  />

<input type="file" accept="image/*">