web-dev-qa-db-ja.com

jQuery拡張子をチェックせずにアップロードされたファイルが画像であるかどうかを確認する方法は？

ここの初心者。問題は、アップロードしたファイルのサイズと拡張子を検証するためにチェックするメソッドを現在作成していることです。ただし、そのような検証は多くの問題を引き起こす可能性があるため、拡張機能のチェックは解決策ではありません。私がしたいのは、実際のファイルタイプを確認し、拡張メソッドを使用せずに検証することです。 jQueryファイルバリデーター を使用しようとしましたが、使用できません...これは、現在のコードのスニペットです。

<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

スクリプト：

App.Dispatcher.on("uploadpic", function() {         
        $(":file").change(function() {
            if (this.files && this.files[0] && this.files[0].name.match(/\.(jpg|jpeg|png|gif)$/) ) {
                if(this.files[0].size>1048576) {
                    alert('File size is larger than 1MB!');
                }
                else {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            } else alert('This is not an image file!');
        });
        function imageIsLoaded(e) {
            result = e.target.result;
            $('#image').attr('src', result);
        };
    });

アップロード入力が変更されると呼び出され、検証後に画像をアップロードして表示します。今のところ、私は検証だけに関心があり、助けやアイデアは大歓迎です！

javascriptjqueryvalidation
19
Acallar

次のようなものを試してください：

JavaScript

const file = this.files[0];
const  fileType = file['type'];
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
if (!validImageTypes.includes(fileType)) {
    // invalid file type code goes here.
}

jQuery

var file = this.files[0];
var fileType = file["type"];
var validImageTypes = ["image/gif", "image/jpeg", "image/png"];
if ($.inArray(fileType, validImageTypes) < 0) {
     // invalid file type code goes here.
}
55
Hoyen

ここではjqueryは必要ありません。

var mimeType=this.files[0]['type'];//mimeType=image/jpeg or application/pdf etc...


//ie image/jpeg will be ['image','jpeg'] and we keep the first value
    if(mimeType.split('/')[0] === 'image'){
       console.log('the file is image');
    }

ファイルがイメージであるかどうかをチェックする関数を作成することもできます。

function isImage(file){
   return file['type'].split('/')[0]=='image');//returns true or false
}

 isImage(this.file[0]);

更新（es6）

es6 includesメソッドを使用すると、さらに簡単になります。

const isImage = (file) => file['type'].includes('image');
20
Mike Antoniadis

ファイルがイメージかどうかだけを知りたい場合の簡単なヒントを次に示します。

var file = this.files[0];
var fileType = file["type"];

if (fileType.search('image') >= 0) {
  ...
}
5
romeromedeiros

Plsは関連クエリ here を参照します。ここでの答えは、画像オブジェクトに画像をロードし、その幅と高さのプロパティがゼロでないことを確認することを示唆しています。このテクニックはあなたの問題を解決するのにも使えると思います。

また、参照できるように fiddle を作成しました。以下の関連コード：

var img = new Image();
img.addEventListener("load",function(){
  alert('success');
});
img.addEventListener("error",function(){
      alert('error');
});
  img.src = picFile.result;
3
sujit

私がやりたいのは、実際のファイルタイプを確認することです

files[0].type propertyにアクセスしてみてください。 Webアプリケーションのファイルの使用 を参照してください

$(":file").on("change", function(e) {

  console.log(this.files[0].type);
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />
2
guest271314

JQuery Validatorを使用している人がここに来た場合、簡単な方法は次のとおりです。

jQuery.validator.addMethod(
    "onlyimages",
    function (value, element) {
        if (this.optional(element) || !element.files || !element.files[0]) {
            return true;
        } else {
            var fileType = element.files[0].type;
            var isImage = /^(image)\//i.test(fileType);
            return isImage;
        }
    },
    'Sorry, we can only accept image files.'
);

その後、.validate（）関数に追加されます。

1
Neil Thompson

あなたは文字列のファイルタイプを変換しようとすることができ、そのスライスの後にこの文字列を次のようにします：

if(String(file.type).slice(0, 6) === 'image/') {....some code}
0
Oleg Sewruk