使用 jquery 检查输入文件的格式是否正确答案

【问题标题】：Check input file for correct format with jquery使用 jquery 检查输入文件的格式是否正确
【发布时间】：2012-05-20 17:01:10
【问题描述】：

我用这个代码http://jsbin.com/uboqu3/83/edit#source

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

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

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

我需要检查 jquery 的格式是否正确。例如，如果图片有 jpg 则一切正常，并且功能 show picture whitch 将被加载。如果图片 --> gif、png tahn 显示警报或 div 消息，输入 type=file 将被重置并且不会显示图片。有人能阻止我吗？

【问题讨论】：

标签： jquery

【解决方案1】：

您可以简单地检查文件名的扩展名是否与 jpg 不同：

function readURL(input) {
    if (input.files && input.files[0]) {
        //Check the extension
        if(!(/\.jpe?g$/i).test(input.files[0].name)) return alert('Error');
        var reader = new FileReader();

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

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

【讨论】：

【解决方案2】：

试试这个

function readURL(input) {
        if (input.files && input.files[0]) {
            var fileName = input.files[0];
            if(fileName.toLowerCase().indexOf(".jpg") == -1){
               alert("Invalid image file");
               return;
            }
            var reader = new FileReader();

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

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

【讨论】：

【解决方案3】：

更可靠的方法是检查文件类型。即：

function readURL(input) {
        if (input.files && input.files[0]) {
            var fileName = input.files[0];
            if(fileName.type != "image/jpeg"){
               alert("Invalid image file");
               return;
            }
            var reader = new FileReader();

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

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

【讨论】：