ファイルタイプに基づく条件付き警告アップロード

Question

こんにちは皆さん、ありがとうございます。 最初に、これは私の最初の質問ですので、私は間違いをしています。 秒、私はjavascript/jquery noobです。

画像のアップロードを確認し、その結果に基づいてさまざまなアラートを実行するjavascriptコードを作成しました。

スクリプトは、両方のファイルタイプ（imageとpdf）を検証する必要があります。しかし、イメージの場合、サイズと寸法を検証する必要があります。 pdfの場合は、サイズのみを検証する必要があります。

「画像がない場合は画像の幅と高さを確認してください」という画像のようなものがありますが、pdfファイルサイズを確認してください」と表示され、

アップロード時にpdfを許可し、サイズを確認してからアラートを返します。

しかし、私は実際にどのように異なるファイルタイプをプログラム的に区別するのか分かりません。

はここに私の元のコードです：

jQuery(document).ready(function($) { 
 

 
    var _URL = window.URL || window.webkitURL; 
 
    var submits = document.getElementsByClassName('gform_button'); 
 
    var submit = submits[0]; 
 

 
    $(".customUpload input:file").click(function(e) { 
 
     this.value = ""; 
 
     submit.disabled = false; 
 
    }); 
 
    $(".customUpload input:file").change(function(e) { 
 
     var file, img; 
 
     var width, height, size, sizeInMB; 
 

 
     if ((file = this.files[0])) { 
 
      img = new Image(); 
 
      img.onload = function() { 
 
       width = this.width; 
 
       height = this.height; 
 
       size = this.size; 
 
       sizeInMB = (size/(1024*1024)).toFixed(2); 
 
       if (sizeInMB > 20) { 
 
        alert("File is to big"); 
 
        submit.disabled = true; 
 
       } 
 
       if (width < 300 || height < 300) { 
 
        alert("Image size is lower than 300px"); 
 
       \t  submit.disabled = true; 
 
       }; 
 
      }; 
 
      img.onerror = function() { 
 
       alert("not a valid file: " + file.type); 
 
       submit.disabled = true; 
 
      }; 
 
      img.src = _URL.createObjectURL(file); 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="customUpload"> 
 
    <form action="" class="cart"> 
 
    <input type="file" id="file" /> <!-- accept="image/gif, image/jpeg, image/png, image/tiff" --> 
 
    <button type="submit" id ="submit" name="submit" class="single_add_to_cart_button gform_button">SUBMIT</button> 
 
    </form> 
 
</div>

すべてに感謝し、良い一日を過ごします。

Answer 1

私は答えの一部として（ドット付き）拡張機能とサイズ

var fileExtension = file.name.substr(file.name.length - 4, 4); 
var fileSize = file.size; 

jQuery(document).ready(function($) { 
 

 
    var _URL = window.URL || window.webkitURL; 
 
    var submits = document.getElementsByClassName('gform_button'); 
 
    var submit = submits[0]; 
 

 
    $(".customUpload input:file").click(function(e) { 
 
     this.value = ""; 
 
     submit.disabled = false; 
 
    }); 
 
    $(".customUpload input:file").change(function(e) { 
 
     var file, img; 
 
     var width, height, size, sizeInMB; 
 
     if ((file = this.files[0])) { 
 
      var fileExtension = file.name.substr(file.name.length - 4, 4); 
 
      var fileSize = file.size; 
 
      
 
      alert(fileExtension + " file with size of " + fileSize); 
 
      
 
      img = new Image(); 
 
      img.onload = function() { 
 
       width = this.width; 
 
       height = this.height; 
 
       size = file.size; 
 
       sizeInMB = (size/(1024*1024)).toFixed(2); 
 
       if (sizeInMB > 20) { 
 
        alert("File is to big"); 
 
        submit.disabled = true; 
 
       } 
 
       if (width < 300 || height < 300) { 
 
        alert("Image size is lower than 300px"); 
 
       \t  submit.disabled = true; 
 
       }; 
 
      }; 
 
      img.onerror = function() { 
 
       alert("not a valid file: " + file.type); 
 
       submit.disabled = true; 
 
      }; 
 
      img.src = _URL.createObjectURL(file); 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="customUpload"> 
 
    <form action="" class="cart"> 
 
    <input type="file" id="file" /> <!-- accept="image/gif, image/jpeg, image/png, image/tiff" --> 
 
    <button type="submit" id ="submit" name="submit" class="single_add_to_cart_button gform_button">SUBMIT</button> 
 
    </form> 
 
</div>